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

B&agrave;i học n&agrave;y giải th&iacute;ch về kiểu dẫn xuất <code>ReturnType</code>.
<h2 style="text-align: justify;">Tr&iacute;ch xuất kiểu trả về của h&agrave;m</h2>
Trong một số trường hợp, bạn c&oacute; thể muốn tr&iacute;ch xuất kiểu trả về của h&agrave;m. Để l&agrave;m điều đ&oacute;, bạn sử dụng h&agrave;m dẫn xuất <code>ReturnType</code> được t&iacute;ch hợp sẵn trong TypeScript.
V&iacute; dụ: nếu bạn c&oacute; một h&agrave;m trả về một <code>string</code>, bạn c&oacute; thể sử dụng <code>ReturnType&lt;yourFunction&gt;</code> v&agrave; n&oacute; sẽ trả về kiểu <code>string</code>. D&ograve;ng 5 trong đoạn code sau g&aacute;n một kiểu cho biến, đ&oacute; l&agrave; kiểu chuỗi v&igrave; kiểu trả về của h&agrave;m <code>getName</code> l&agrave; <code>string</code>.
<pre class="language-ts" data-content="function%20getName()%3A%20string%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20%22Name%22%3B%0A%7D%0Atype%20FunctionType%20%3D%20ReturnType%3Ctypeof%20getName%3E%3B%0Aconst%20varX%3AFunctionType%20%3D%20%22This%20is%20a%20string%22%3B%0Aconsole.log(varX)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>function getName(): string {
 return "Name";
}
type FunctionType = ReturnType&lt;typeof getName&gt;;
const varX:FunctionType = "This is a string";
console.log(varX);</code></pre>
<code>ReturnType</code> trở n&ecirc;n quan trọng khi kiểu trả về của h&agrave;m thay đổi trong tương lai. Đoạn code sau sẽ kh&ocirc;ng bi&ecirc;n dịch được v&igrave; TypeScript sẽ thay đổi kiểu <code>FunctionType</code> tr&ecirc;n d&ograve;ng 4 th&agrave;nh kiểu trả về mới của h&agrave;m. Đoạn code sau kh&ocirc;ng bi&ecirc;n dịch như mong đợi, điều n&agrave;y thể hiện c&aacute;ch TypeScript đảm bảo t&iacute;nh an to&agrave;n v&agrave; duy tr&igrave; sự nhất qu&aacute;n trong m&atilde; nguồn.
<pre class="language-ts" data-content="function%20getName()%3A%20%7B%20firstName%3A%20string%2C%20lastName%3A%20string%20%7D%20%7B%0A%C2%A0%C2%A0return%20%7B%20firstName%3A%20%22John%22%2C%20lastName%3A%20%22Doe%22%20%7D%3B%0A%7D%0Atype%20FunctionType%20%3D%20ReturnType%3Ctypeof%20getName%3E%3B%20%2F%2F%20Not%20a%20string%20anymore%0Aconst%20varX%3A%20FunctionType%20%3D%20%22This%20is%20a%20string%22%3B%20%2F%2F%20TypeScript%20won't%20compile%0Aconsole.log(varX)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>function getName(): { firstName: string, lastName: string } {
 return { firstName: "John", lastName: "Doe" };
}
type FunctionType = ReturnType&lt;typeof getName&gt;; // Not a string anymore
const varX: FunctionType = "This is a string"; // TypeScript won't compile
console.log(varX);</code></pre>
ReturnType bị sửa đổi khiến TypeScript ngừng bi&ecirc;n dịch
<h2 style="text-align: justify;">ReturnType với nhiều kiểu trả về</h2>
Đoạn code tr&ecirc;n sử dụng typeof để lấy chữ k&yacute; kiểu của h&agrave;m, đ&oacute; l&agrave; <code>()=&gt;string</code>, v&agrave; <code>ReturnType</code> lấy <code>string</code>. Nhưng nếu h&agrave;m kh&ocirc;ng chỉ định r&otilde; r&agrave;ng kiểu trả về th&igrave; ta n&ecirc;n l&agrave;m như n&agrave;o?
TypeScript c&oacute; thể suy luận kiểu, ngay cả khi h&agrave;m trả về nhiều đối tượng kh&aacute;c nhau. Trong v&iacute; dụ dưới đ&acirc;y, x&aacute;c suất 50% l&agrave; h&agrave;m trả về một đối tượng kh&ocirc;ng x&aacute;c định v&agrave; 50% c&ograve;n lại, h&agrave;m trả về một đối tượng c&oacute; trường tương tự c&oacute; c&aacute;c kiểu dữ liệu kh&aacute;c nhau.
<pre class="language-ts" data-content="function%20getSomething()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0if%20(Math.random()%20%3C%200.5)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0return%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0cond%3A%20%22under%200.5%22%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0typeScript%3A%20true%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7D%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%20else%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0return%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0cond%3A%201%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0typeScript%3A%20%223.7%22%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0moreField%3A%20true%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7D%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%7D%0Atype%20functionType2%20%3D%20ReturnType%3Ctypeof%20getSomething%3E%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>function getSomething() {
 if (Math.random() &lt; 0.5) {
 return {
 cond: "under 0.5",
 typeScript: true,
 };
 } else {
 return {
 cond: 1,
 typeScript: "3.7",
 moreField: true
 };
 }
}
type functionType2 = ReturnType&lt;typeof getSomething&gt;;</code></pre>
Di con trỏ l&ecirc;n tr&ecirc;n <code>functionType2</code> ở d&ograve;ng 15 v&agrave; bạn sẽ thấy hiển thị:
<pre class="language-ts" data-content="type%20functionType2%20%3D%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0cond%3A%20string%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0typeScript%3A%20boolean%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0moreField%3F%3A%20undefined%3B%0A%7D%20%7C%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0cond%3A%20number%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0typeScript%3A%20string%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0moreField%3A%20boolean%3B%0A%7D" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>type functionType2 = {
 cond: string;
 typeScript: boolean;
 moreField?: undefined;
} | {
 cond: number;
 typeScript: string;
 moreField: boolean;
}</code></pre>
Phần th&uacute; vị l&agrave; TypeScript đ&atilde; x&aacute;c định <code>moreField?: undefined</code> cho phần đầu ti&ecirc;n của kiểu union. L&yacute; do l&agrave; phần thứ hai trả về th&agrave;nh vi&ecirc;n dưới dạng <code>boolean</code>, nhưng phần đầu ti&ecirc;n kh&ocirc;ng trả về th&agrave;nh vi&ecirc;n n&agrave;y. TypeScript trả về một kiểu c&acirc;n đối về cấu tr&uacute;c giữa c&aacute;c gi&aacute; trị trả về tiềm năng.
Nếu một h&agrave;m trả về hai kiểu nguy&ecirc;n thủy th&igrave; kiểu trả về sẽ l&agrave; một union của c&aacute;c gi&aacute; trị. Tuy nhi&ecirc;n, TypeScript đủ th&ocirc;ng minh để thu hẹp kiểu cụ thể hơn nếu c&oacute; thể. V&iacute; dụ sau kh&ocirc;ng trả về <code>number | string</code> m&agrave; trả về c&aacute;c gi&aacute; trị hằng <code>1 | "1"</code>.
<pre class="language-ts" data-content="function%20getSomething2()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0if%20(Math.random()%20%3C%200.5)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0return%201%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%20else%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0return%20%221%22%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%7D%0Atype%20functionType3%20%3D%20ReturnType%3Ctypeof%20getSomething2%3E%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>function getSomething2() {
 if (Math.random() &lt; 0.5) {
 return 1;
 } else {
 return "1";
 }
}
type functionType3 = ReturnType&lt;typeof getSomething2&gt;;</code></pre>
<h2 style="text-align: justify;">ReturnType với h&agrave;m bất đồng bộ</h2>
Bạn c&oacute; thể tự hỏi <code>ReturnType</code> trả về kiểu g&igrave; trong trường hợp của h&agrave;m bất đồng bộ. Một h&agrave;m bất đồng bộ trả về promise của kiểu. V&iacute; dụ:
<pre class="language-ts" data-content="%C2%A0%C2%A0%C2%A0%C2%A0async%20function%20asyncFunction()%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0return%20await%20Math.random()%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code> async function asyncFunction(){
 return await Math.random();
 }</code></pre>
Đoạn code n&agrave;y trả về kiểu <code>Promise&lt;number&gt;</code>. Nhưng nếu ta muốn kiểu <code>number</code> l&agrave; tham số generic th&igrave; n&ecirc;n l&agrave;m như n&agrave;o? Điều n&agrave;y c&oacute; thể được thực hiện bằng c&aacute;ch sử dụng kiểu điều kiện. Kiểu điều kiện nằm ngo&agrave;i phạm vi của b&agrave;i học n&agrave;y, nhưng dưới đ&acirc;y l&agrave; v&iacute; dụ minh họa c&aacute;ch n&oacute; được sử dụng với <code>ReturnType</code>:
<pre class="language-ts" data-content="async%20function%20asyncFunction()%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20await%20Math.random()%3B%0A%7D%0Atype%20functionType4%20%3D%20ReturnType%3Ctypeof%20asyncFunction%3E%3B%20%2F%2F%20Promise%3Cnumber%3E%0Atype%20functionType5%20%3D%20ReturnTypeFromPromise%3CfunctionType4%3E%3B%20%2F%2F%20number%0A%0Atype%20ReturnTypeFromPromise%3CT%3E%20%3D%20T%20extends%20Promise%3Cinfer%20U%3E%20%3F%20U%20%3A%20T%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>async function asyncFunction(){
 return await Math.random();
}
type functionType4 = ReturnType&lt;typeof asyncFunction&gt;; // Promise&lt;number&gt;
type functionType5 = ReturnTypeFromPromise&lt;functionType4&gt;; // number

type ReturnTypeFromPromise&lt;T&gt; = T extends Promise&lt;infer U&gt; ? U : T;</code></pre>
D&ograve;ng 7 l&agrave; nơi c&ocirc;ng việc quan trọng xảy ra. Kiểu điều kiện kiểm tra xem kiểu trả về <code>T</code> c&oacute; kế thừa từ <code>Promise&lt;?&gt;</code> kh&ocirc;ng. Nếu c&oacute;, n&oacute; c&oacute; thể <code>infer</code> kiểu th&agrave;nh U v&agrave; trả về.
Ngược lại, n&oacute; sẽ trả về to&agrave;n bộ kiểu. Kh&ocirc;ng cần đi s&acirc;u v&agrave;o kiểu điều kiện, ta c&oacute; thể kết luận rằng <code>ReturnType</code> cho ph&eacute;p ta tr&iacute;ch xuất kiểu trả về của h&agrave;m.

Kiểu ReturnType