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 c&aacute;ch định nghĩa c&aacute;c th&agrave;nh vi&ecirc;n có c&ugrave;ng kiểu dữ liệu bằng c&aacute;ch sử dụng k&yacute; hiệu chỉ số.
<h2 style="text-align: justify;">C&aacute;c th&agrave;nh vi&ecirc;n c&ugrave;ng kiểu dữ liệu</h2>
Khi bạn định nghĩa một interface c&oacute; chứa c&aacute;c th&agrave;nh vi&ecirc;n cụ thể v&agrave; một kiểu chỉ số sử dụng chuỗi l&agrave;m kh&oacute;a, th&igrave; tất cả c&aacute;c th&agrave;nh vi&ecirc;n của interface đ&oacute; phải c&oacute; kiểu chuỗi.
[___WARNING_Đoạn code dưới đ&acirc;y gặp lỗi chuyển đổi m&atilde; nguồn._WARNING___]
<pre class="language-ts" data-content="interface%20MyStringDictionaryWithMembers%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%5Bkey%3A%20string%5D%3A%20string%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0m1%3A%20string%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0m2%3A%20number%3B%20%2F%2F%20Won't%20transpile%2C%20must%20be%20a%20string%0A%7D" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>interface MyStringDictionaryWithMembers {
 [key: string]: string;
 m1: string;
 m2: number; // Won't transpile, must be a string
}</code></pre>
Nếu ta sửa đổi v&iacute; dụ trước để <code>m2</code> l&agrave; <code>string</code> ở d&ograve;ng 4, đoạn code sẽ bi&ecirc;n dịch th&agrave;nh c&ocirc;ng.
<pre class="language-ts" data-content="interface%20MyStringDictionaryWithMembers%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%5Bkey%3A%20string%5D%3A%20string%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0m1%3A%20string%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0m2%3A%20string%3B%20%2F%2F%20Fixed!%0A%7D" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>interface MyStringDictionaryWithMembers {
 [key: string]: string;
 m1: string;
 m2: string; // Fixed!
}</code></pre>
Từ đ&acirc;y, bạn c&oacute; thể sử dụng interface <code>MyStringDictionaryWithMembers</code> bằng c&aacute;ch tạo một đối tượng được định nghĩa bởi t&ecirc;n của interface đ&oacute;.
<pre class="language-ts" data-content="interface%20MyStringDictionaryWithMembers%20%7B%0A%C2%A0%C2%A0%5Bkey%3A%20string%5D%3A%20string%3B%0A%C2%A0%C2%A0m1%3A%20string%3B%0A%C2%A0%C2%A0m2%3A%20string%3B%20%2F%2F%20Fixed!%0A%7D%0A%0Alet%20map%3A%20MyStringDictionaryWithMembers%20%3D%20%7B%0A%C2%A0%C2%A0m1%3A%20%22value1%22%2C%0A%C2%A0%C2%A0m2%3A%20%22value2%22%2C%0A%C2%A0%C2%A0%5B%22stringHere%22%5D%3A%20%22stringValue%22%0A%7D%3B%0A%0Aconsole.log(map)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>interface MyStringDictionaryWithMembers {
 [key: string]: string;
 m1: string;
 m2: string; // Fixed!
}

let map: MyStringDictionaryWithMembers = {
 m1: "value1",
 m2: "value2",
 ["stringHere"]: "stringValue"
};

console.log(map);</code></pre>
Bạn cũng c&oacute; thể triển khai lớp nếu n&oacute; y&ecirc;u cầu nhiều t&iacute;nh năng hướng đối tượng hơn.
<pre class="language-ts" data-content="interface%20MyStringDictionaryWithMembers%20%7B%0A%C2%A0%C2%A0%5Bkey%3A%20string%5D%3A%20string%3B%0A%C2%A0%C2%A0m1%3A%20string%3B%0A%C2%A0%C2%A0m2%3A%20string%3B%20%2F%2F%20Fixed!%0A%7D%0A%0Aclass%20MyMap%20implements%20MyStringDictionaryWithMembers%20%7B%0A%C2%A0%C2%A0constructor()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0this.m1%20%3D%20%22%22%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0this.m2%20%3D%20%22%22%3B%0A%C2%A0%C2%A0%7D%0A%C2%A0%C2%A0%5Bkey%3A%20string%5D%3A%20string%3B%0A%C2%A0%C2%A0m1%3A%20string%3B%0A%C2%A0%C2%A0m2%3A%20string%3B%20%2F%2F%20Fixed!%0A%7D%3B%0A%0Alet%20myMap%20%3D%20new%20MyMap()%3B%0AmyMap.m1%20%3D%20%22M1Value%22%3B%0AmyMap.m2%20%3D%20%22M2Value%22%3B%0AmyMap%5B%22key1%22%5D%20%3D%20%22val1%22%3B%0AmyMap%5B%22key2%22%5D%20%3D%20%22val2%22%3B%0Aconsole.log(myMap)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>interface MyStringDictionaryWithMembers {
 [key: string]: string;
 m1: string;
 m2: string; // Fixed!
}

class MyMap implements MyStringDictionaryWithMembers {
 constructor() {
 this.m1 = "";
 this.m2 = "";
 }
 [key: string]: string;
 m1: string;
 m2: string; // Fixed!
};

let myMap = new MyMap();
myMap.m1 = "M1Value";
myMap.m2 = "M2Value";
myMap["key1"] = "val1";
myMap["key2"] = "val2";
console.log(myMap);</code></pre>
<h2 style="text-align: justify;">C&aacute;c th&agrave;nh vi&ecirc;n kh&aacute;c kiểu dữ liệu</h2>
Một c&aacute;ch để khắc phục hạn chế của việc chỉ định kiểu cố định l&agrave; tạo chỉ số l&agrave; union của nhiều kiểu dữ liệu. Điều n&agrave;y cho ph&eacute;p tất cả c&aacute;c kiểu union c&oacute; thể được sử dụng như c&aacute;c kiểu của th&agrave;nh vi&ecirc;n.
<pre class="language-ts" data-content="interface%20MyStringDictionaryWithMembers2%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%5Bkey%3A%20string%5D%3A%20string%20%7C%20number%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0m1%3A%20string%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0m2%3A%20number%3B%0A%7D" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>interface MyStringDictionaryWithMembers2 {
 [key: string]: string | number;
 m1: string;
 m2: number;
}</code></pre>
<h2 style="text-align: justify;">Triển khai interface bằng k&yacute; hiệu chỉ số</h2>
Vậy l&agrave;m thế n&agrave;o để triển khai một interface bằng c&aacute;ch sử dụng c&aacute;c th&agrave;nh vi&ecirc;n của một lớp đ&atilde; tồn tại? Quy tắc cũ vẫn được &aacute;p dụng: bạn chỉ c&oacute; thể sử dụng c&aacute;c th&agrave;nh vi&ecirc;n c&oacute; kiểu được chỉ định bởi k&yacute; hiệu chỉ số. Ta kh&ocirc;ng thể tạo union từ kiểu của c&aacute;c th&agrave;nh vi&ecirc;n trong lớp. Đoạn code dưới đ&acirc;y kh&ocirc;ng bi&ecirc;n dịch cho đến khi <code>| number</code> v&agrave; <code>m2: number</code> được loại bỏ.
<pre class="language-ts" data-content="interface%20MyStringDictionaryWithMembers%20%7B%0A%C2%A0%C2%A0%5Bkey%3A%20string%5D%3A%20string%3B%0A%C2%A0%C2%A0m1%3A%20string%3B%0A%7D%0A%0Aclass%20MyClass%20implements%20MyStringDictionaryWithMembers%20%7B%0A%C2%A0%C2%A0%5Bkey%3A%20string%5D%3A%20string%20%7C%20number%3B%0A%C2%A0%C2%A0m1%3A%20string%3B%0A%C2%A0%C2%A0m2%3A%20number%3B%0A%7D" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>interface MyStringDictionaryWithMembers {
 [key: string]: string;
 m1: string;
}

class MyClass implements MyStringDictionaryWithMembers {
 [key: string]: string | number;
 m1: string;
 m2: number;
}</code></pre>
Để th&ecirc;m <code>m2: number</code> v&agrave;o lớp hiện tại, c&aacute;ch duy nhất l&agrave; tạo một kiểu mới bằng c&aacute;ch kết hợp với kiểu cũ, tức l&agrave; kết hợp c&aacute;c trường thuộc t&iacute;nh của hai kiểu thay v&igrave; một kiểu kế thừa c&aacute;c trường thuộc t&iacute;nh của kiểu kh&aacute;c. Vấn đề l&agrave; ngay cả khi kiểu c&oacute; thể bi&ecirc;n dịch, việc tạo đối tượng sẽ thất bại trong bước kiểm tra của TypeScript v&igrave; gi&aacute; trị kh&ocirc;ng thể g&aacute;n cho kiểu của k&yacute; hiệu chỉ số. Do đ&oacute;, ch&uacute;ng ta rơi v&agrave;o t&igrave;nh huống bế tắc v&agrave; kh&ocirc;ng c&oacute; giải ph&aacute;p khắc phục.
<pre class="language-ts" data-content="interface%20MyStringDictionaryWithMembers%20%7B%0A%C2%A0%C2%A0%5Bkey%3A%20string%5D%3A%20string%3B%0A%C2%A0%C2%A0m1%3A%20string%3B%0A%7D%0A%0Ainterface%20MySecondInterface%20%7B%0A%C2%A0%C2%A0m2%3A%20number%3B%0A%7D%0A%0Atype%20Intersect%20%3D%20MyStringDictionaryWithMembers%20%26%20MySecondInterface%3B%0A%0A%2F%2F%20let%20m%3A%20Intersect%20%3D%20%7B%0A%2F%2F%20%C2%A0%20m1%3A%20%22m1%20value%22%2C%0A%2F%2F%20%C2%A0%20m2%3A%202%2C%0A%2F%2F%20%C2%A0%20%5B%22AString%22%5D%3A%20%22AnotherString%22%0A%2F%2F%20%7D%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>interface MyStringDictionaryWithMembers {
 [key: string]: string;
 m1: string;
}

interface MySecondInterface {
 m2: number;
}

type Intersect = MyStringDictionaryWithMembers &amp; MySecondInterface;

// let m: Intersect = {
// m1: "m1 value",
// m2: 2,
// ["AString"]: "AnotherString"
// };</code></pre>