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 instanceof v&agrave; c&aacute;ch TypeScript sử dụng instanceof để so s&aacute;nh c&aacute;c kiểu.
<h2 style="text-align: justify;">instanceof với lớp</h2>
<code>instanceof</code> cũng l&agrave; một kh&aacute;i niệm kế thừa từ JavaScript v&agrave; được thực thi tại thời điểm chạy. Tuy nhi&ecirc;n, TypeScript c&oacute; thể xử l&yacute; to&aacute;n tử kiểm tra đang xem x&eacute;t chuỗi nguy&ecirc;n mẫu để x&aacute;c định kiểu của đối tượng. Tương tự như <code>typeof</code>, khi so s&aacute;nh <code>instanceof</code> trả về true, kiểu sẽ được thu hẹp th&agrave;nh kiểu được kiểm tra. <code>Instanceof</code> kh&ocirc;ng thể được sử dụng cho kiểm tra interface v&agrave; chỉ được sử dụng cho so s&aacute;nh lớp v&igrave; n&oacute; phụ thuộc v&agrave;o phương thức tạo.
V&iacute; dụ sau cho thấy <code>C2</code> kế thừa từ <code>C1</code>. Tr&ecirc;n d&ograve;ng 3, một thực thể của <code>C2</code> được tạo ra nhưng khi kiểm tra xem n&oacute; c&oacute; phải l&agrave; một thực thể của <code>C1</code> kh&ocirc;ng, kết quả trả về true. D&ograve;ng 7 cũng trả về <code>true</code>. Điều đặc biệt n&agrave;y li&ecirc;n quan đến t&iacute;nh kế thừa v&agrave; <code>instanceof</code>.
<pre class="language-ts" data-content="class%20C1%20%7B%20m1!%3A%20string%20%7D%0Aclass%20C2%20extends%20C1%7B%20m2!%3Anumber%20%7D%0Aconst%20c2%20%3D%20new%20C2()%3B%0Aif%20(c2%20instanceof%20C1)%20%7B%0A%C2%A0%C2%A0console.log(%22c2%20is%20an%20instance%20of%20C1%22)%3B%0A%7D%0Aif%20(c2%20instanceof%20C2)%20%7B%0A%C2%A0%C2%A0console.log(%22c2%20is%20an%20instance%20of%20C2%22)%3B%0A%7D" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>class C1 { m1!: string }
class C2 extends C1{ m2!:number }
const c2 = new C2();
if (c2 instanceof C1) {
 console.log("c2 is an instance of C1");
}
if (c2 instanceof C2) {
 console.log("c2 is an instance of C2");
}</code></pre>
V&iacute; dụ tr&ecirc;n g&acirc;y kh&oacute; khăn cho việc ph&acirc;n biệt giữa hai lớp bằng <code>instanceof</code>. Trong khi đ&oacute;, với v&iacute; dụ dưới đ&acirc;y, hai lớp được ph&acirc;n biệt r&otilde; r&agrave;ng khi sử dụng <code>instanceof</code>. L&yacute; do l&agrave; ch&uacute;ng nằm trong hai chuỗi nguy&ecirc;n mẫu kh&aacute;c nhau.
<pre class="language-ts" data-content="class%20C1%20%7B%20%7D%0Aclass%20C2%20%7B%20%7D%0Aconst%20c1%20%3D%20new%20C1()%3B%0Aif%20(c1%20instanceof%20C1)%20%7B%0A%C2%A0%C2%A0console.log(%22c1%20is%20an%20instance%20of%20C1%22)%3B%0A%7D%0Aif%20(c1%20instanceof%20C2)%20%7B%0A%C2%A0%C2%A0console.log(%22c1%20is%20an%20instance%20of%20C1%22)%3B%0A%7D" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>class C1 { }
class C2 { }
const c1 = new C1();
if (c1 instanceof C1) {
 console.log("c1 is an instance of C1");
}
if (c1 instanceof C2) {
 console.log("c1 is an instance of C1");
}</code></pre>
Ngay cả khi hai lớp c&oacute; cấu tr&uacute;c giống nhau, ch&uacute;ng vẫn c&oacute; thể được ph&acirc;n biệt với nhau bằng <code>instanceof</code>.
<h2 style="text-align: justify;">instanceof với error, array v&agrave; map</h2>
Tuy nhi&ecirc;n, nếu bất kỳ chuỗi nguy&ecirc;n mẫu n&agrave;o kế thừa từ <code>Error</code>, <code>Array</code> hoặc <code>Map</code> th&igrave; mỗi phương thức tạo phải gọi <code>setPrototypeOf</code>.
<pre class="language-ts" data-content="class%20C100%20extends%20Error%20%7B%0A%C2%A0%C2%A0constructor()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0super()%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0Object.setPrototypeOf(this%2C%20C100.prototype)%3B%0A%C2%A0%C2%A0%7D%0A%7D%0Aclass%20C200%20extends%20C100%20%7B%0A%C2%A0%C2%A0constructor()%20%7B%20super()%3B%20Object.setPrototypeOf(this%2C%20C200.prototype)%3B%20%7D%0A%7D%0Aconst%20c100%20%3D%20new%20C200()%3B%0Aif%20(c100%20instanceof%20C100)%20%7B%0A%C2%A0%C2%A0console.log(%22c100%20is%20an%20instance%20of%20C100%22)%3B%0A%7D%0Aif%20(c100%20instanceof%20C200)%20%7B%0A%C2%A0%C2%A0console.log(%22c100%20is%20an%20instance%20of%20C200%22)%3B%0A%7D%20if%20(c100%20instanceof%20Error)%20%7B%0A%C2%A0%C2%A0console.log(%22c100%20is%20an%20instance%20of%20Error%22)%3B%0A%7D" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>class C100 extends Error {
 constructor() {
 super();
 Object.setPrototypeOf(this, C100.prototype);
 }
}
class C200 extends C100 {
 constructor() { super(); Object.setPrototypeOf(this, C200.prototype); }
}
const c100 = new C200();
if (c100 instanceof C100) {
 console.log("c100 is an instance of C100");
}
if (c100 instanceof C200) {
 console.log("c100 is an instance of C200");
} if (c100 instanceof Error) {
 console.log("c100 is an instance of Error");
}</code></pre>
Trước phi&ecirc;n bản 2.7, to&aacute;n tử <code>instanceOf</code> phụ thuộc v&agrave;o cấu tr&uacute;c của đối tượng. Kể từ phi&ecirc;n bản 2.7, to&aacute;n tử sử dụng chuỗi kế thừa.
V&iacute; dụ dưới đ&acirc;y minh họa sự thay đổi đ&oacute;. <code>ChildB</code> v&agrave; <code>ChildC</code> c&oacute; c&ugrave;ng cấu tr&uacute;c như được định nghĩa tr&ecirc;n d&ograve;ng 2 v&agrave; 3.
Trước phi&ecirc;n bản 2.7, <code>instanceof</code> so s&aacute;nh dựa tr&ecirc;n cấu tr&uacute;c, do đ&oacute;, c&acirc;u lệnh điều kiện đầu ti&ecirc;n chấp nhận <code>ChildB</code> v&agrave; <code>ChildC</code>. Điều n&agrave;y c&oacute; nghĩa rằng luồng thực thi đi v&agrave;o điều kiện tr&ecirc;n d&ograve;ng 7. Khối <code>else</code> kh&ocirc;ng bao giờ được thực thi v&igrave; hai điều kiện (B + C v&agrave; D) trước đ&oacute; đ&atilde; bao h&agrave;m tất cả c&aacute;c trường hợp khả thi.
Kể từ phi&ecirc;n bản 2.7, chỉ <code>ChildB</code> thỏa m&atilde;n khối điều kiện đầu ti&ecirc;n, <code>ChildC</code> thỏa m&atilde;n khối thứ hai v&agrave; <code>ChildD</code> thỏa m&atilde;n khối điều kiện c&ograve;n lại. Do đ&oacute;, chương tr&igrave;nh sẽ thực thi c&aacute;c c&acirc;u lệnh trong mỗi khối điều kiện.
<pre class="language-ts" data-content="class%20BaseClassA%20%7B%20%7D%0Aclass%20ChildB%20extends%20BaseClassA%20%7B%20%7D%0Aclass%20ChildC%20extends%20BaseClassA%20%7B%20%7D%0Aclass%20ChildD%20extends%20BaseClassA%20%7B%20c%3A%20string%20%3D%20%22c%20value%22%20%7D%0A%0Afunction%20compareWithInstanceOf(x%3A%20ChildB%20%7C%20ChildC%20%7C%20ChildD)%20%7B%0A%C2%A0%C2%A0if%20(x%20instanceof%20ChildB)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0console.log(%22Found%20an%20instance%20of%20B%22)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0x%3B%C2%A0%20%2F%2F%20B%20(V2.6%3A%20B%20%7C%20C)%C2%A0%C2%A0%C2%A0%C2%A0%0A%C2%A0%C2%A0%7D%20else%20if%20(x%20instanceof%20ChildD)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0console.log(%22Found%20an%20instance%20of%20D%22)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0x%3B%C2%A0%20%2F%2F%20D%C2%A0%C2%A0%C2%A0%C2%A0%0A%C2%A0%C2%A0%7D%20else%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0console.log(%22Found%20an%20instance%20of%20C%22)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0x%3B%C2%A0%20%2F%2F%20C%20(V2.6%20never)%C2%A0%C2%A0%C2%A0%C2%A0%0A%C2%A0%C2%A0%7D%0A%7D%0A%0AcompareWithInstanceOf(new%20ChildB)%3B%0AcompareWithInstanceOf(new%20ChildC)%3B%0AcompareWithInstanceOf(new%20ChildD)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>class BaseClassA { }
class ChildB extends BaseClassA { }
class ChildC extends BaseClassA { }
class ChildD extends BaseClassA { c: string = "c value" }

function compareWithInstanceOf(x: ChildB | ChildC | ChildD) {
 if (x instanceof ChildB) {
 console.log("Found an instance of B");
 x; // B (V2.6: B | C) 
 } else if (x instanceof ChildD) {
 console.log("Found an instance of D");
 x; // D 
 } else {
 console.log("Found an instance of C");
 x; // C (V2.6 never) 
 }
}

compareWithInstanceOf(new ChildB);
compareWithInstanceOf(new ChildC);
compareWithInstanceOf(new ChildD);</code></pre>
Đầu ra của chương tr&igrave;nh sẽ xuất hiện theo c&ugrave;ng thứ tự với c&aacute;c cuộc gọi tại c&aacute;c d&ograve;ng 19-21. L&yacute; do l&agrave; code đang chạy tr&ecirc;n phi&ecirc;n bản tr&ecirc;n 2.6. To&aacute;n tử <code>instanceof</code> kiểm tra xem đối tượng b&ecirc;n tr&aacute;i c&oacute; phải l&agrave; một thực thể của lớp b&ecirc;n phải hay kh&ocirc;ng v&agrave; khi c&oacute; nhiều điều kiện, ta c&oacute; thể thu hẹp kiểu một c&aacute;ch ch&iacute;nh x&aacute;c hơn.

Kiểm tra kiểu bằng instanceof