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 thảo luận c&aacute;ch kiểm tra kiểu bằng typeof trong JavaScript.
<h2 style="text-align: justify;">Mượn kiểu</h2>
Ta c&oacute; thể mượn kiểu của biến kh&aacute;c bằng c&aacute;ch sử dụng <code>typeof</code>. Mượn kiểu cung cấp một mức độ bảo vệ trong giai đoạn thiết kế bằng c&aacute;ch cho ph&eacute;p bạn chỉ định một kiểu sẽ được sử dụng trong m&atilde; nguồn m&agrave; kh&ocirc;ng cần phải định nghĩa một interface hoặc kiểu thực sự. V&iacute; dụ: bạn định nghĩa một biến với một số th&agrave;nh vi&ecirc;n bằng c&aacute;ch sử dụng dấu ngoặc nhọn. Tuy nhi&ecirc;n, kh&ocirc;ng c&oacute; phương thức t&iacute;ch hợp n&agrave;o c&oacute; thể lấy cấu tr&uacute;c của đối tượng.
Tuy nhi&ecirc;n, với <code>typeof</code>, bạn c&oacute; thể tr&iacute;ch xuất kiểu từ biến. Bạn c&oacute; thể sử dụng từ kh&oacute;a để lấy th&ocirc;ng tin từ biến hoặc tham số. Thay v&igrave; định nghĩa một kiểu cụ thể, bạn sử dụng <code>typeof</code> theo sau l&agrave; t&ecirc;n của biến để mượn cấu tr&uacute;c của kiểu. Kỹ thuật n&agrave;y được gọi l&agrave; "type aliases" (b&iacute; danh kiểu).
Kiểu trả về từ <code>typeof</code> c&oacute; thể được chuyển đổi th&agrave;nh một kiểu cụ thể bằng c&aacute;ch sử dụng <code>type</code>, theo sau l&agrave; t&ecirc;n của kiểu m&agrave; bạn muốn tạo, kiểu n&agrave;y được x&aacute;c định dựa tr&ecirc;n th&ocirc;ng tin lấy được từ <code>typeof</code>.
<pre class="language-ts" data-content="let%20myObject%20%3D%20%7B%20name%3A%20%22test%22%20%7D%3B%0Alet%20myOtherObject%3A%20typeof%20myObject%3B%20%2F%2F%20Borrow%20type%20of%20the%20%22myObject%22%0AmyOtherObject%20%3D%20%7B%20name%3A%20%22test2%22%20%7D%3B%0Atype%20TypeFromTypeOf%20%3D%20typeof%20myOtherObject%3B%20%2F%2F%20Borrow" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>let myObject = { name: "test" };
let myOtherObject: typeof myObject; // Borrow type of the "myObject"
myOtherObject = { name: "test2" };
type TypeFromTypeOf = typeof myOtherObject; // Borrow</code></pre>
<h2 style="text-align: justify;">Ph&acirc;n t&iacute;ch luồng điều khiển</h2>
Kể từ phi&ecirc;n bản 2.0, TypeScript sử dụng control flow analysis (ph&acirc;n t&iacute;ch luồng điều khiển) để đưa ra th&ocirc;ng tin ch&iacute;nh x&aacute;c hơn về kiểu, phụ thuộc v&agrave;o c&aacute;ch m&atilde; nguồn tương t&aacute;c với biến.
Ph&acirc;n t&iacute;ch luồng điều khiển đặc biệt hữu &iacute;ch khi một biến c&oacute; nhiều kiểu; v&iacute; dụ: một biến được định nghĩa với c&aacute;c kiểu <code>number</code>, <code>string</code> hoặc <code>undefined</code>. TypeScript ph&acirc;n t&iacute;ch c&acirc;u lệnh để suy ra kiểu cụ thể nhất m&agrave; biến c&oacute; thể c&oacute;, từ đ&oacute; đưa ra gợi &yacute; về kiểu thực tế của biến.
V&iacute; dụ: nếu bạn thực hiện một kiểm tra để x&aacute;c định xem biến c&oacute; phải l&agrave; <code>undefined</code> hay kh&ocirc;ng, mọi thứ sau c&acirc;u lệnh kiểm tra sẽ c&oacute; kiểu <code>string</code> hoặc <code>number</code>. D&ograve;ng 2 trong đoạn code sau đang thực hiện kiểm tra đ&oacute;. Sau khi kiểm tra, TypeScript biết rằng biến kh&ocirc;ng thể l&agrave; undefined sau thời điểm đ&oacute; v&agrave; sẽ kh&ocirc;ng đưa ra cảnh b&aacute;o lỗi về truy cập <code>undefined</code> khi bạn truy cập c&aacute;c th&agrave;nh vi&ecirc;n của biến n&agrave;y. Trong v&iacute; dụ tiếp theo, c&aacute;c d&ograve;ng 4 - 8 chắc chắn 100% rằng biến kh&ocirc;ng phải l&agrave; <code>undefined</code>, do đ&oacute; bạn c&oacute; thể sử dụng <code>typeof</code> để x&aacute;c định kiểu của biến l&agrave; <code>string</code> hoặc <code>number</code>.
<code>typeof</code> c&oacute; thể được sử dụng để thu hẹp kiểu của biến dựa tr&ecirc;n so s&aacute;nh khi cần thiết. V&iacute; dụ tr&ecirc;n sử dụng kiểu nguy&ecirc;n thủy, nhưng kiểu c&oacute; thể được thu hẹp th&agrave;nh một đối tượng, mảng, b&iacute; danh, hoặc interface. Tuy nhi&ecirc;n, điều quan trọng l&agrave; <code>typeof</code> kh&ocirc;ng thể được sử dụng với lớp hoặc interface. Bạn sẽ t&igrave;m hiểu c&aacute;ch xử l&yacute; c&aacute;c t&igrave;nh huống phức tạp như vậy trong c&aacute;c b&agrave;i học sắp tới.
<pre class="language-ts" data-content="function%20functionCheckTypeOf(param1%3A%20number%20%7C%20string%20%7C%20undefined)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0if%20(param1%20%3D%3D%3D%20undefined)%20%7B%20%2F%2F%20Check%20each%20type%2C%20first%20undefined%20directly%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0console.log(%22It's%20undefined%22)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%20else%20if%20(typeof%20param1%20%3D%3D%3D%20%22number%22)%20%7B%20%2F%2F%20Check%20primitive%20with%20typeof%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0console.log(%22It's%20a%20number%22)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%20else%20if%20(typeof%20param1%20%3D%3D%3D%20%22string%22)%20%7B%20%2F%2F%20Check%20primitive%20with%20typeof%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0console.log(%22It's%20a%20string%22)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%7D%0AfunctionCheckTypeOf(1)%3B%0AfunctionCheckTypeOf(%221%22)%3B%0AfunctionCheckTypeOf(undefined)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>function functionCheckTypeOf(param1: number | string | undefined) {
 if (param1 === undefined) { // Check each type, first undefined directly
 console.log("It's undefined");
 } else if (typeof param1 === "number") { // Check primitive with typeof
 console.log("It's a number");
 } else if (typeof param1 === "string") { // Check primitive with typeof
 console.log("It's a string");
 }
}
functionCheckTypeOf(1);
functionCheckTypeOf("1");
functionCheckTypeOf(undefined);</code></pre>
<code>typeof</code> kh&ocirc;ng hoạt động như mong đợi khi được &aacute;p dụng cho lớp v&agrave; interface. Trong cả hai trường hợp, <code>typeof</code> trả về một <code>object</code>. Xem d&ograve;ng 12 v&agrave; 13. Để x&aacute;c định kiểu của lớp, ta cần phải sử dụng <code>instanceOf</code>. <code>instanceOf</code> sẽ được thảo luận trong b&agrave;i học tiếp theo.
C&oacute; nhiều c&aacute;ch tiếp cận để xử l&yacute; interface, nhưng c&aacute;ch l&agrave;m phức tạp hơn v&igrave; interface trong TypeScript kh&ocirc;ng c&oacute; dạng biểu diễn tương đương trong JavaScript tại thời điểm chạy. So s&aacute;nh interface sẽ được thảo luận trong c&aacute;c b&agrave;i học sau.
<pre class="language-ts" data-content="class%20ClassToUseWithTypeOf%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0private%20x%3A%20string%20%3D%20%22val1%22%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0public%20y%3A%20string%20%3D%20%22val2%22%3B%0A%7D%0Ainterface%20InterfaceTypeOf%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0y%3A%20string%3B%0A%7D%0A%0Aconst%20classTypeOf%20%3D%20new%20ClassToUseWithTypeOf()%3B%0Aconst%20interTypeOf%3A%20InterfaceTypeOf%20%3D%20%7B%20y%3A%20%22test%22%20%7D%3B%0A%0Aconsole.log(%22Class%20TypeOf%22%2C%20typeof%20classTypeOf)%3B%20%2F%2F%20object%0Aconsole.log(%22Interface%20TypeOf%22%2C%20typeof%20(interTypeOf))%3B%20%2F%2F%20object" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>class ClassToUseWithTypeOf {
 private x: string = "val1";
 public y: string = "val2";
}
interface InterfaceTypeOf {
 y: string;
}

const classTypeOf = new ClassToUseWithTypeOf();
const interTypeOf: InterfaceTypeOf = { y: "test" };

console.log("Class TypeOf", typeof classTypeOf); // object
console.log("Interface TypeOf", typeof (interTypeOf)); // object</code></pre>
Trong b&agrave;i học n&agrave;y, ta thấy rằng mặc d&ugrave; <code>typeof</code> cho ph&eacute;p ta x&aacute;c định kiểu của biến nhưng c&oacute; một số hạn chế trong nhiều t&igrave;nh huống. Khi l&agrave;m việc với c&aacute;c t&igrave;nh huống sử dụng đối tượng, lớp, interface hoặc kiểu, bạn n&ecirc;n sử dụng c&aacute;c phương ph&aacute;p kiểm tra kiểu kh&aacute;c đ&atilde; được đề cập trong kh&oacute;a học n&agrave;y.

Kiểm tra kiểu bằng typeof