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, ta sẽ t&igrave;m hiểu một kh&iacute;a cạnh cơ bản của TypeScript l&agrave; x&aacute;c định kiểu dựa tr&ecirc;n cấu tr&uacute;c của đối tượng.
<h2 style="text-align: justify;">Ng&ocirc;n ngữ dựa tr&ecirc;n cấu tr&uacute;c</h2>
TypeScript l&agrave; một ng&ocirc;n ngữ dựa tr&ecirc;n cấu tr&uacute;c (x&aacute;c định kiểu dựa tr&ecirc;n cấu tr&uacute;c hoặc h&igrave;nh th&aacute;i của dữ liệu), kh&ocirc;ng phải l&agrave; ng&ocirc;n ngữ dựa tr&ecirc;n định danh (t&ecirc;n). Điều n&agrave;y c&oacute; nghĩa l&agrave; TypeScript so s&aacute;nh cấu tr&uacute;c thay v&igrave; t&ecirc;n để x&aacute;c định xem c&aacute;c đối tượng c&oacute; giống nhau hay kh&ocirc;ng.
Đoạn code sau c&oacute; một h&agrave;m nhận một kiểu ẩn danh c&oacute; trường thuộc t&iacute;nh <code>name</code>. Đoạn code gọi h&agrave;m theo ba c&aacute;ch:
<ol style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">interface</li>
<li style="font-weight: 400;" aria-level="1">kiểu</li>
<li style="font-weight: 400;" aria-level="1">đối tượng ẩn danh</li>
</ol>
Chương tr&igrave;nh hoạt động trong cả ba trường hợp v&igrave; ch&uacute;ng c&oacute; cấu tr&uacute;c ch&iacute;nh x&aacute;c cần thiết.
Trong đoạn code sau, <code>MyTypeA</code> định nghĩa một cấu tr&uacute;c trong đ&oacute; y&ecirc;u cầu đối tượng c&oacute; một th&agrave;nh vi&ecirc;n duy nhất l&agrave; <code>name</code> ở d&ograve;ng 2. Kiểu được định nghĩa ở d&ograve;ng 4 v&agrave; tham số ẩn danh ở d&ograve;ng 6 cũng c&oacute; cấu tr&uacute;c tương tự như <code>MyTypeA</code>.
D&ograve;ng 10-11 định nghĩa hai kiểu v&agrave; d&ograve;ng 12-13 gọi h&agrave;m với hai đối số, ngay cả khi hai đối số n&agrave;y kh&ocirc;ng phải l&agrave; tham số ẩn danh, code vẫn hoạt động v&igrave; ch&uacute;ng c&oacute; c&ugrave;ng cấu tr&uacute;c như được mong đợi. TypeScript kh&ocirc;ng phải l&agrave; ng&ocirc;n ngữ dựa tr&ecirc;n định danh m&agrave; dựa tr&ecirc;n cấu tr&uacute;c. Do đ&oacute;, ở d&ograve;ng 14, h&agrave;m cũng c&oacute; thể được gọi.
<pre class="language-ts" data-content="interface%20MyTypeA%20%7B%0A%C2%A0%C2%A0name%3A%20string%3B%20%2F%2F%20Same%20property%20name-type%20than%20line%204%20and%206%0A%7D%0Atype%20MyTypeB%20%3D%20%7B%20name%3A%20string%20%7D%3B%20%2F%2F%20Notice%20the%20name%20property%20is%20the%20same%20as%20the%20anonymous%20at%20line%206%0A%0Afunction%20ouputName(obj%3A%20%7B%20name%3A%20string%20%7D)%3A%20void%20%7B%20%2F%2F%20Anonymous%20type%20for%20first%20parameter%0A%C2%A0%C2%A0console.log(obj.name)%3B%0A%7D%0A%0Alet%20typeA%3A%20MyTypeA%20%3D%20%7B%20name%3A%20%22A%22%20%7D%3B%20%2F%2F%20TypeA%0Alet%20typeB%3A%20MyTypeB%20%3D%20%7B%20name%3A%20%22B%22%20%7D%3B%20%2F%2F%20TypeB%0AouputName(typeA)%3B%0AouputName(typeB)%3B%0AouputName(%7B%20name%3A%20%22C%22%20%7D)%3B%20%2F%2F%20Also%20anonymous" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>interface MyTypeA {
 name: string; // Same property name-type than line 4 and 6
}
type MyTypeB = { name: string }; // Notice the name property is the same as the anonymous at line 6

function ouputName(obj: { name: string }): void { // Anonymous type for first parameter
 console.log(obj.name);
}

let typeA: MyTypeA = { name: "A" }; // TypeA
let typeB: MyTypeB = { name: "B" }; // TypeB
ouputName(typeA);
ouputName(typeB);
ouputName({ name: "C" }); // Also anonymous</code></pre>
<h2 style="text-align: justify;">Th&ecirc;m trường bổ sung</h2>
Khi l&agrave;m việc với TypeScript, kiểu khai b&aacute;o kh&ocirc;ng cần phải khớp ch&iacute;nh x&aacute;c với kiểu thực tế. Y&ecirc;u cầu tối thiểu l&agrave; kiểu thực tế đ&aacute;p ứng y&ecirc;u cầu về mặt cấu tr&uacute;c của kiểu khai b&aacute;o, tuy nhi&ecirc;n n&oacute; vẫn c&oacute; thể th&ecirc;m c&aacute;c trường bổ sung. V&iacute; dụ sau c&oacute; <code>InterfaceB</code> với trường <code>id</code> được bổ sung ở d&ograve;ng 7. Ngay cả khi trường l&agrave; kh&ocirc;ng bắt buộc ở d&ograve;ng 13, việc gọi h&agrave;m bi&ecirc;n dịch vẫn th&agrave;nh c&ocirc;ng do bản chất dựa tr&ecirc;n cấu tr&uacute;c của TypeScript.
<pre class="language-ts" data-content="interface%20InterfaceA%20%7B%0A%C2%A0%C2%A0name%3A%20string%3B%0A%7D%0A%0Ainterface%20InterfaceB%20%7B%0A%C2%A0%C2%A0name%3A%20string%3B%0A%C2%A0%C2%A0id%3A%20number%3B%0A%7D%0A%0Alet%20intA%3A%20InterfaceA%20%3D%20%7B%20name%3A%20%22A%22%20%7D%3B%0Alet%20intB%3A%20InterfaceB%20%3D%20%7B%20name%3A%20%22B%22%2C%20id%3A%202%20%7D%3B%0A%0Afunction%20outputName(obj%3A%20%7B%20name%3A%20string%20%7D)%3A%20void%20%7B%0A%C2%A0%C2%A0console.log(obj.name)%3B%0A%7D%0A%0AoutputName(intA)%3B%0AoutputName(intB)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>interface InterfaceA {
 name: string;
}

interface InterfaceB {
 name: string;
 id: number;
}

let intA: InterfaceA = { name: "A" };
let intB: InterfaceB = { name: "B", id: 2 };

function outputName(obj: { name: string }): void {
 console.log(obj.name);
}

outputName(intA);
outputName(intB);</code></pre>
Phi&ecirc;n bản thay thế cho đoạn code tr&ecirc;n l&agrave;:
<pre class="language-ts" data-content="interface%20InterfaceA%20%7B%0A%C2%A0%C2%A0name%3A%20string%3B%0A%7D%0A%0Ainterface%20InterfaceB%20%7B%0A%C2%A0%C2%A0name%3A%20string%3B%0A%C2%A0%C2%A0id%3A%20number%3B%0A%7D%0A%0Alet%20intA%3A%20InterfaceA%20%3D%20%7B%20name%3A%20%22A%22%20%7D%3B%0Alet%20intB%3A%20InterfaceB%20%3D%20%7B%20name%3A%20%22B%22%2C%20id%3A%202%20%7D%3B%0A%0Afunction%20outputInterfaceA(obj%3A%20InterfaceA)%3A%20void%20%7B%20%2F%2F%20Not%20anonymous%0A%C2%A0%C2%A0console.log(obj.name)%3B%0A%7D%0A%0AoutputInterfaceA(intA)%3B%0AoutputInterfaceA(intB)%3B%20%2F%2F%20Interface%20B%20can%20substitute%20for%20Interface%20A" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>interface InterfaceA {
 name: string;
}

interface InterfaceB {
 name: string;
 id: number;
}

let intA: InterfaceA = { name: "A" };
let intB: InterfaceB = { name: "B", id: 2 };

function outputInterfaceA(obj: InterfaceA): void { // Not anonymous
 console.log(obj.name);
}

outputInterfaceA(intA);
outputInterfaceA(intB); // Interface B can substitute for Interface A</code></pre>
D&ugrave; <code>InterfaceA</code> l&agrave; bắt buộc tại d&ograve;ng 13 v&agrave; <code>InterfaceB</code> kh&ocirc;ng triển khai hoặc kế thừa <code>InterfaceA</code>, chương tr&igrave;nh vẫn chuyển m&atilde; nguồn v&igrave; n&oacute; c&oacute; tất cả c&aacute;c trường cấu tr&uacute;c (<code>name: string)</code>.
<h2 style="text-align: justify;">Cải thiện m&atilde; nguồn</h2>
C&aacute;ch l&agrave;m hiệu quả hơn l&agrave; loại bỏ code tr&ugrave;ng lặp bằng c&aacute;ch kế thừa <code>InterfaceA</code>.
<pre class="language-ts" data-content="interface%20InterfaceA%20%7B%0A%C2%A0%C2%A0name%3A%20string%3B%0A%7D%0A%0Ainterface%20InterfaceB%20extends%20InterfaceA%20%7B%0A%C2%A0%C2%A0id%3A%20number%3B%0A%7D%0A%0Alet%20intA%3A%20InterfaceA%20%3D%20%7B%20name%3A%20%22A%22%20%7D%3B%0Alet%20intB%3A%20InterfaceB%20%3D%20%7B%20name%3A%20%22B%22%2C%20id%3A%202%20%7D%3B%0A%0Afunction%20outputInterfaceA(obj%3AInterfaceA)%3A%20void%20%7B%0A%C2%A0%C2%A0console.log(obj.name)%3B%0A%7D%0A%0AoutputInterfaceA(intA)%3B%0AoutputInterfaceA(intB)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>interface InterfaceA {
 name: string;
}

interface InterfaceB extends InterfaceA {
 id: number;
}

let intA: InterfaceA = { name: "A" };
let intB: InterfaceB = { name: "B", id: 2 };

function outputInterfaceA(obj:InterfaceA): void {
 console.log(obj.name);
}

outputInterfaceA(intA);
outputInterfaceA(intB);</code></pre>
Trong b&agrave;i học n&agrave;y, ch&uacute;ng ta thấy điều quan trọng đối với TypeScript l&agrave; đảm bảo c&aacute;c loại dữ liệu c&oacute; c&ugrave;ng cấu tr&uacute;c, kh&ocirc;ng cần thiết phải c&ugrave;ng t&ecirc;n. Điều n&agrave;y c&oacute; nghĩa l&agrave; ta c&oacute; thể tạo một b&iacute; danh cho c&aacute;c cấu tr&uacute;c kh&aacute;c nhau theo mong muốn. Trong c&aacute;c b&agrave;i học sắp tới, ch&uacute;ng ta sẽ t&igrave;m hiểu c&aacute;c loại b&iacute; danh kh&aacute;c nhau.

Bí danh với Hành vi cấu trúc của TypeScript