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 c&ugrave;ng t&igrave;m hiểu c&aacute;ch TypeScript suy luận kiểu generic.
<h2 style="text-align: justify;">Suy luận kiểu với generic</h2>
Ch&uacute;ng ta ho&agrave;n to&agrave;n c&oacute; thể suy luận kiểu cho generic. Nếu h&agrave;m nhận một tham số kiểu <code>T</code> v&agrave; cũng trả về kiểu <code>T</code>, TypeScript sẽ suy luận kiểu cho generic dựa tr&ecirc;n kiểu của gi&aacute; trị được truyền v&agrave;o tham số v&agrave; do đ&oacute; gi&aacute; trị trả về được suy luận l&agrave; kiểu <code>T</code>. Một ngoại lệ duy nhất l&agrave; nếu h&agrave;m kh&ocirc;ng sử dụng gi&aacute; trị kiểu <code>T</code>, n&oacute; sẽ trả về một kiểu đối tượng rỗng.
<pre class="language-ts" data-content="function%20genericInferred%3CT%3E(param%3A%20T)%20%7B%7D%0AgenericInferred(%22str%22)%3B%20%2F%2F%20T%20is%20of%20type%20string%20by%20inference%0AgenericInferred%3Cstring%3E(%22str%22)%3B%20%2F%2F%20Same%20as%20above%2C%20no%20inference" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>function genericInferred&lt;T&gt;(param: T) {}
genericInferred("str"); // T is of type string by inference
genericInferred&lt;string&gt;("str"); // Same as above, no inference</code></pre>
H&agrave;m trong v&iacute; dụ tr&ecirc;n chỉ định kiểu dữ liệu cho generic <code>T</code> một c&aacute;ch ngầm định ở d&ograve;ng 2 v&agrave; tường minh ở d&ograve;ng 3, nhưng trong cả hai trường hợp kiểu <code>T</code> đều c&oacute; thể được thay thế bằng bất kỳ kiểu n&agrave;o. L&yacute; do l&agrave; v&igrave; kiểu <code>T</code> kh&ocirc;ng c&oacute; bất kỳ r&agrave;ng buộc n&agrave;o.
<pre class="language-ts" data-content="function%20genericInferred%3CT%3E(param%3A%20T)%20%7B%7D%0AgenericInferred(1)%3B%0AgenericInferred(true)%3B%0AgenericInferred(%7B%20custom%3A%20%22sure%22%20%7D)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>function genericInferred&lt;T&gt;(param: T) {}
genericInferred(1);
genericInferred(true);
genericInferred({ custom: "sure" });</code></pre>
<h2 style="text-align: justify;">Suy luận kiểu ngầm định với generic&nbsp;</h2>
Mặc d&ugrave; kiểu dữ liệu kh&ocirc;ng được chỉ định một c&aacute;ch r&otilde; r&agrave;ng, TypeScript sẽ lu&ocirc;n x&aacute;c định kiểu được truyền v&agrave;o h&agrave;m l&agrave; kiểu generic. Trong v&iacute; dụ tr&ecirc;n, d&ograve;ng 2 suy luận <code>T</code> l&agrave; kiểu số, d&ograve;ng 3 suy luận <code>T</code> l&agrave; kiểu boolean v&agrave; d&ograve;ng 4 suy luận <code>T</code> l&agrave; kiểu của đối tượng t&ugrave;y chỉnh.
Như bạn c&oacute; thể thấy, ch&uacute;ng ta cần sử dụng r&agrave;ng buộc kiểu generic nếu muốn truy cập v&agrave;o một phần của kiểu được suy luận.
<pre class="language-ts" data-content="function%20genericInferred%3CT%20extends%20string%3E(param%3A%20T)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20param.length%3B%0A%7D%0Aconsole.log(genericInferred(%22Four%22))%3B%0A%2F%2F%20genericInferred(123)%3B%20%2F%2F%20Does%20not%20transpile%0Atype%20UUID%20%3D%20string%3B%0Alet%20id%3A%20UUID%20%3D%20%22123-456%22%3B%0Aconsole.log(genericInferred(id))%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>function genericInferred&lt;T extends string&gt;(param: T) {
 return param.length;
}
console.log(genericInferred("Four"));
// genericInferred(123); // Does not transpile
type UUID = string;
let id: UUID = "123-456";
console.log(genericInferred(id));</code></pre>
Đoạn code tr&ecirc;n cho thấy h&agrave;m generic c&oacute; thể nhận bất cứ gi&aacute; trị n&agrave;o c&oacute; kiểu mở rộng từ kiểu <code>string</code>. D&ograve;ng 1 th&ecirc;m r&agrave;ng buộc bằng c&aacute;ch từ kh&oacute;a <code>extends</code> sau <code>T</code>.
Đ&oacute; c&oacute; thể l&agrave; một chuỗi hoặc một kiểu dựa tr&ecirc;n chuỗi (chẳng hạn như kiểu <code>UUID</code>). Ở d&ograve;ng 6, ch&uacute;ng ta định nghĩa kiểu t&ugrave;y chỉnh <code>UUID</code>. Kiểu n&agrave;y thực chất l&agrave; một b&iacute; danh của kiểu <code>string</code>. Việc sử dụng b&iacute; danh kh&ocirc;ng c&oacute; nhiều &yacute; nghĩa quan trọng nhưng n&oacute; gi&uacute;p cung cấp m&ocirc; tả r&otilde; r&agrave;ng hơn về nội dung của chuỗi.
Trong cả hai trường hợp, TypeScript c&oacute; thể suy luận kiểu dữ liệu v&agrave; kiểu cụ thể của <code>T</code> m&agrave; kh&ocirc;ng cần chỉ định r&otilde; r&agrave;ng. Trong trường hợp với d&ograve;ng 5 được chuyển th&agrave;nh comment, chương tr&igrave;nh gặp lỗi bi&ecirc;n dịch v&igrave; gi&aacute; trị <code>123</code> c&oacute; kiểu số v&agrave; kh&ocirc;ng đ&aacute;p ứng được r&agrave;ng buộc rằng <code>T</code> phải mở rộng từ kiểu <code>string</code>.

Suy luận kiểu generic