Ch&agrave;o mừng bạn đến với kh&oacute;a học Lập tr&igrave;nh TypeScript tại TEK4.VN. Trong kh&oacute;a học n&agrave;y, ch&uacute;ng ta sẽ học c&aacute;c kh&aacute;i niệm cơ bản của TypeScript.&nbsp;
<h2 style="text-align: justify;">Y&ecirc;u cầu kiến thức</h2>
Để tham gia kh&oacute;a học, bạn cần c&oacute; kiến thức cơ bản về JavaScript (TEK4.VN đang triển khai). V&igrave; kh&oacute;a học n&agrave;y bao h&agrave;m c&aacute;c kh&aacute;i niệm kh&aacute;c nhau trong TypeScript n&ecirc;n cũng cần nắm th&ecirc;m một số kiến thức về ph&aacute;t triển web như <a href="https://tek4.vn/khoa-hoc/lap-trinh-giao-dien-voi-html-css">HTML &amp; CSS</a>
<h3 style="text-align: justify;">TypeScript cơ bản d&agrave;nh cho người mới bắt đầu</h3>
Giải th&iacute;ch về TypeScript cơ bản v&agrave; c&aacute;c kh&aacute;i niệm li&ecirc;n quan. Bao gồm c&aacute;c chương:
<ol>
<li>Giới thiệu</li>
<li>C&aacute;c kiến thức cơ bản về biến</li>
<li>Enum</li>
<li>Kiểu Generic</li>
<li>H&agrave;m</li>
<li>Kiểu dẫn xuất</li>
<li>Đối tượng</li>
<li>K&yacute; hiệu chỉ số</li>
<li>C&aacute;c kiến thức n&acirc;ng cao về biến</li>
<li>Ngoại lệ</li>
<li>B&iacute; danh</li>
<li>Kiểm tra kiểu</li>
<li>Iterator</li>
<li>Thao t&aacute;c đối tượng v&agrave; mảng</li>
<li>Chia sẻ m&atilde; nguồn</li>
<li>Kết luận</li>
</ol>

Lập trình TypeScript cơ bản

Trong b&agrave;i học n&agrave;y, ch&uacute;ng ta sẽ thảo luận c&aacute;ch mở rộng định nghĩa h&agrave;m bằng c&aacute;ch sử dụng một số cấu tr&uacute;c nạp chồng.
<h2 style="text-align: justify;">Lợi &iacute;ch của h&agrave;m nạp chồng</h2>
TypeScript cho ph&eacute;p ch&uacute;ng ta sử dụng c&aacute;c h&agrave;m nạp chồng. Th&ocirc;ng thường, thuật ngữ 'overload&rsquo; (nạp chồng) li&ecirc;n quan đến một kh&aacute;i niệm hướng đối tượng m&agrave; bạn sẽ học sau n&agrave;y. Bất kỳ h&agrave;m n&agrave;o, ngay cả khi kh&ocirc;ng nằm trong lớp, cũng c&oacute; thể c&oacute; một phi&ecirc;n bản nạp chồng. Lợi &iacute;ch của việc sử dụng h&agrave;m nạp chồng l&agrave; ta c&oacute; thể tạo một h&agrave;m chỉ nhận một số tham số bắt buộc trong c&aacute;c t&igrave;nh huống cụ thể. Thay v&igrave; sử dụng h&agrave;m nạp chồng, bạn cũng c&oacute; thể sử dụng c&aacute;c tham số t&ugrave;y chọn v&agrave; tham số mặc định.
Lợi &iacute;ch của h&agrave;m nạp chồng l&agrave; tạo ra sự r&otilde; r&agrave;ng cho người sử dụng h&agrave;m. Người sử dụng thấy nhiều phi&ecirc;n bản của h&agrave;m với c&aacute;c cấu tr&uacute;c kh&aacute;c nhau (tham số v&agrave; kiểu trả về kh&aacute;c nhau). Tuy nhi&ecirc;n, tr&ecirc;n thực tế ch&uacute;ng vẫn l&agrave; c&ugrave;ng một h&agrave;m.
<h2 style="text-align: justify;">Ghi đ&egrave; kiểu trả về</h2>
Nạp chồng kh&ocirc;ng chỉ ảnh hưởng đến tham số m&agrave; c&ograve;n ảnh hưởng đến kiểu trả về của h&agrave;m. Nếu kh&ocirc;ng sử dụng nạp chồng, bạn sẽ kh&ocirc;ng biết c&aacute;c nh&oacute;m tham số t&ugrave;y chọn n&agrave;o c&oacute; mối li&ecirc;n hệ với nhau v&agrave; tham số n&agrave;o trong số đ&oacute; trả về một kiểu dữ liệu cụ thể. Việc sử dụng nạp chồng đ&ograve;i hỏi bạn phải viết nhiều phi&ecirc;n bản h&agrave;m c&oacute; c&ugrave;ng t&ecirc;n v&agrave; đặt ch&uacute;ng liền kề nhau trong th&acirc;n h&agrave;m. Cấu tr&uacute;c của mỗi phi&ecirc;n bản h&agrave;m bắt đầu từ từ kh&oacute;a function đến kiểu trả về kết th&uacute;c bằng dấu chấm phẩy. Tuy nhi&ecirc;n, h&agrave;m được định nghĩa cuối c&ugrave;ng phải c&oacute; th&acirc;n h&agrave;m đầy đủ v&agrave; chứa to&agrave;n bộ th&ocirc;ng tin của tất cả c&aacute;c phi&ecirc;n bản nạp chồng.
<h2 style="text-align: justify;">V&iacute; dụ</h2>
V&iacute; dụ: nếu bạn c&oacute; một phi&ecirc;n bản nạp chồng nhận một số v&agrave; trả về một số v&agrave; phi&ecirc;n bản thứ hai nhận một chuỗi v&agrave; trả về một chuỗi, phi&ecirc;n bản cuối c&ugrave;ng sẽ chứa một cấu tr&uacute;c c&oacute; một tham số duy nhất kết hợp giữa số v&agrave; chuỗi v&agrave; kiểu trả về l&agrave; union của số v&agrave; chuỗi.
<pre class="language-ts" data-content="function%20f1(p1%3Anumber)%3Anumber%3B%0Afunction%20f1(p1%3Astring)%3Astring%3B%0Afunction%20f1(p1%3Anumber%7Cstring)%3Anumber%7Cstring%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>function f1(p1:number):number;
function f1(p1:string):string;
function f1(p1:number|string):number|string;</code></pre>
D&ograve;ng cuối c&ugrave;ng xử l&yacute; tất cả c&aacute;c phi&ecirc;n bản nạp chồng của h&agrave;m, điều đ&oacute; c&oacute; nghĩa l&agrave; ở đầu h&agrave;m cuối c&ugrave;ng, bạn sẽ viết code xử l&yacute; để kiểm tra xem c&aacute;c tham số cụ thể đ&atilde; được truyền v&agrave;o hay chưa v&agrave; thực hiện h&agrave;nh động tương ứng.
<pre class="language-ts" data-content="function%20functionWithOverload(param1%3A%20number)%3A%20boolean%3B%0Afunction%20functionWithOverload(param1%3A%20number%2C%20param2%3A%20string)%3A%20string%3B%0Afunction%20functionWithOverload(param1%3A%20number%2C%20param2%3A%20string%20%3D%20%22default%22%2C%20param3%3F%3A%20string)%3A%20boolean%20%7C%20string%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0if%20(param3%20%3D%3D%3D%20undefined)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0return%20%22string%22%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20true%3B%0A%7D%0Aconsole.log(functionWithOverload(1))%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>function functionWithOverload(param1: number): boolean;
function functionWithOverload(param1: number, param2: string): string;
function functionWithOverload(param1: number, param2: string = "default", param3?: string): boolean | string {
 if (param3 === undefined) {
 return "string";
 }
 return true;
}
console.log(functionWithOverload(1));</code></pre>
Ngo&agrave;i việc gi&uacute;p x&aacute;c định r&otilde; c&aacute;c tham số n&agrave;o l&agrave; t&ugrave;y chọn v&agrave; kiểu trả về tương ứng, c&uacute; ph&aacute;p nạp chồng c&ograve;n l&agrave;m cho chức năng Intellisense trở n&ecirc;n th&ocirc;ng minh hơn với một IDE c&oacute; khả năng ph&acirc;n loại c&aacute;c t&igrave;nh huống bằng t&agrave;i liệu ph&ugrave; hợp v&agrave; những c&aacute;ch kết hợp c&uacute; ph&aacute;p khả thi.
V&iacute; dụ tr&ecirc;n in ra "string" v&igrave; phi&ecirc;n bản nạp chồng đầu ti&ecirc;n được chọn, tức l&agrave; <code>param3</code>, một tham số t&ugrave;y chọn, l&agrave; <code>undefined</code> ở d&ograve;ng 3. Gi&aacute; trị <code>undefined</code> dẫn đến việc thực thi điều kiện trả về <code>string</code> thay v&igrave; gi&aacute; trị <code>boolean</code>.

Nạp chồng để mở rộng định nghĩa hàm