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, bạn sẽ t&igrave;m hiểu về kiểu trả về generic, tham số t&ugrave;y chọn v&agrave; gi&aacute; trị mặc định.
<h2 style="text-align: justify;">Kiểu trả về generic của h&agrave;m</h2>
Kể từ phi&ecirc;n bản 2.4 trở đi, tr&igrave;nh bi&ecirc;n dịch của TypeScript c&oacute; thể suy luận kiểu cho gi&aacute; trị trả về của h&agrave;m. Trước phi&ecirc;n bản 2.4, việc sử dụng <code>s.length</code> sẽ g&acirc;y ra lỗi. Biến <code>s</code> kh&ocirc;ng phải l&agrave; kiểu <code>U[]</code> m&agrave; l&agrave; một đối tượng rỗng {}.
<pre class="language-ts" data-content="function%20arrayMap%3CT%2C%20U%3E(f%3A%20(x%3A%20T)%20%3D%3E%20U)%3A%20(a%3A%20T%5B%5D)%20%3D%3E%20U%5B%5D%20%7B%C2%A0%C2%A0%C2%A0%C2%A0%0A%C2%A0%C2%A0return%20a%20%3D%3E%20a.map(f)%3B%0A%7D%0Aconst%20lengths%3A%20(a%3A%20string%5B%5D)%20%3D%3E%20number%5B%5D%20%3D%20arrayMap(s%20%3D%3E%20s.length)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>function arrayMap&lt;T, U&gt;(f: (x: T) =&gt; U): (a: T[]) =&gt; U[] { 
 return a =&gt; a.map(f);
}
const lengths: (a: string[]) =&gt; number[] = arrayMap(s =&gt; s.length);</code></pre>
<h2 style="text-align: justify;">Tham số t&ugrave;y chọn của h&agrave;m</h2>
Trong TypeScript, bạn c&oacute; thể tạo tham số t&ugrave;y chọn với những c&uacute; ph&aacute;p kh&aacute;c nhau. C&aacute;ch đầu ti&ecirc;n l&agrave; sử dụng union để chỉ định kiểu của đối số v&agrave; kiểu undefined.
<pre class="language-ts" data-content="function%20undefinedOptional1(a%3A%20number%20%7C%20undefined%2C%20b%3A%20number)%20%7B%7D%0AundefinedOptional1(undefined%2C%201)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>function undefinedOptional1(a: number | undefined, b: number) {}
undefinedOptional1(undefined, 1);</code></pre>
C&aacute;ch thứ hai l&agrave; sử dụng to&aacute;n tử dấu hỏi sau t&ecirc;n tham số v&agrave; trước dấu chấm phẩy. Trong trường hợp n&agrave;y, tất cả c&aacute;c đối số tiếp theo sẽ phải l&agrave; t&ugrave;y chọn. C&aacute;c đối số tiếp theo kh&ocirc;ng thể c&oacute; kiểu <code>undefined</code> hoặc <code>null</code> hoặc một kiểu cụ thể trừ khi ch&uacute;ng l&agrave; t&ugrave;y chọn.
L&yacute; do l&agrave; c&aacute;c tham số t&ugrave;y chọn kh&ocirc;ng y&ecirc;u cầu ta phải chỉ định c&aacute;ch tham số đ&oacute; được gọi trong h&agrave;m. Trong khi đ&oacute;, khi sử dụng union với undefined, ta vẫn cần truyền tham số đ&oacute; với gi&aacute; trị undefined. Ta cần thực hiện bước kiểm tra kiểu ti&ecirc;u chuẩn để x&aacute;c định xem tham số l&agrave; t&ugrave;y chọn hay đ&atilde; được g&aacute;n gi&aacute; trị <code>undefined</code>. Rất kh&oacute; để ph&acirc;n biệt giữa&nbsp; trường hợp tham số t&ugrave;y chọn v&agrave; tham số c&oacute; gi&aacute; trị <code>undefined</code> v&igrave; cả hai đều sử dụng c&aacute;ch so s&aacute;nh giống nhau.
[___WARNING_Đoạn code dưới đ&acirc;y sẽ gặp lỗi bi&ecirc;n dịch_WARNING___]
<pre class="language-ts" data-content="%C2%A0%C2%A0%C2%A0%C2%A0function%20undefinedOptional2F(a%3F%3A%20number%2C%20b%3A%20number)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%2F%2F%20Doesn't%20compile%20because%20a%20is%20using%20optional%3A%20%3F%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%C2%A0%C2%A0%C2%A0%C2%A0undefinedOptional2F()%3B%20%2F%2F%20Doesn't%20compile%20because%20of%20b%20is%20after%20a%20the%20optional%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0function%20undefinedOptional3F(a%3A%20number%2C%20b%3A%20number%20%7C%20undefined)%20%7B%7D%0A%C2%A0%C2%A0%C2%A0%C2%A0undefinedOptional3F(a)%3B%20%2F%2F%20Doesn't%20compile%2C%20must%20pass%20for%20%22b%22%20undefined%20if%20not%20needed" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code> function undefinedOptional2F(a?: number, b: number) {
 // Doesn't compile because a is using optional: ?
 }
 undefinedOptional2F(); // Doesn't compile because of b is after a the optional

 function undefinedOptional3F(a: number, b: number | undefined) {}
 undefinedOptional3F(a); // Doesn't compile, must pass for "b" undefined if not needed</code></pre>
<h2 style="text-align: justify;">H&agrave;m với gi&aacute; trị mặc định</h2>
Bạn cũng c&oacute; thể thiết lập gi&aacute; trị mặc định cho một trong c&aacute;c tham số. C&uacute; ph&aacute;p dựa tr&ecirc;n kiến thức m&agrave; ta đ&atilde; học, đ&oacute; l&agrave; sử dụng một dấu bằng để g&aacute;n gi&aacute; trị của biến cho đối số. Điểm kh&aacute;c biệt l&agrave; bạn c&oacute; thể thiết lập gi&aacute; trị mặc định ở mọi vị tr&iacute; trong khai b&aacute;o tham số của h&agrave;m. L&yacute; do l&agrave;, tr&aacute;i ngược với đối số t&ugrave;y chọn, đối số mặc định lu&ocirc;n lu&ocirc;n l&agrave; một gi&aacute; trị. Kiểu của đối số n&agrave;y l&agrave; t&ugrave;y chọn v&igrave; TypeScript c&oacute; thể suy ra n&oacute; từ ph&eacute;p g&aacute;n gi&aacute; trị mặc định, nhưng việc l&agrave;m r&otilde; kiểu dữ liệu cũng được coi l&agrave; một thực h&agrave;nh tốt. Khi sử dụng c&aacute;c tham số mặc định, h&agrave;m sử dụng gi&aacute; trị n&agrave;y khi kh&ocirc;ng nhận được gi&aacute; trị từ đối tượng gọi. Trường hợp thứ hai l&agrave; khi h&agrave;m nhận được gi&aacute; trị undefined.
<pre class="language-ts" data-content="function%20funcWithDefault(p1%3A%20string%20%3D%20%22v1%22%2C%20p2%3F%3A%20number%2C%20p3%20%3D%20true)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0console.log(%22P1%22%2C%20p1)%3B%20%2F%2F%20v1%20since%20undefined%0A%C2%A0%C2%A0%C2%A0%C2%A0console.log(%22P2%22%2C%20p2)%3B%20%2F%2F%20undefined%0A%C2%A0%C2%A0%C2%A0%C2%A0console.log(%22P3%22%2C%20p3)%3B%20%2F%2Fboolean%20by%20inference%0A%7D%0A%0AfuncWithDefault(undefined)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>function funcWithDefault(p1: string = "v1", p2?: number, p3 = true) {
 console.log("P1", p1); // v1 since undefined
 console.log("P2", p2); // undefined
 console.log("P3", p3); //boolean by inference
}

funcWithDefault(undefined);</code></pre>

Kiểu trả về generic, tham số tùy chọn và giá trị mặc định