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, bạn sẽ t&igrave;m hiểu c&aacute;ch sử dụng kiểu hằng để ph&acirc;n biệt kiểu dữ liệu.
<h2 style="text-align: justify;">Kiểm tra kiểu bằng kiểu hằng</h2>
Trong b&agrave;i học về kiểu hằng, bạn đ&atilde; thấy rằng kiểu hằng c&oacute; thể được sử dụng để ph&acirc;n biệt c&aacute;c kiểu kh&aacute;c nhau. Điều n&agrave;y c&oacute; nghĩa l&agrave; bạn c&oacute; thể c&oacute; một h&agrave;m nhận đầu v&agrave;o l&agrave; một kiểu union v&agrave; bạn muốn x&aacute;c định kiểu cụ thể được truyền cho h&agrave;m để thực hiện h&agrave;nh động tương ứng. Bạn cũng đ&atilde; học kỹ thuật branding trong b&iacute; danh kiểu, trong đ&oacute; trường ph&acirc;n loại được sử dụng như một phần trong cấu tr&uacute;c của kiểu. Để nhắc lại kiến thức, dưới đ&acirc;y l&agrave; một v&iacute; dụ với d&ograve;ng 2 v&agrave; 8 c&oacute; hai chuỗi hằng.
<pre class="language-ts" data-content="interface%20Human%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0kind%3A%20%22human%22%3B%20%2F%2F%20Shared%20string%20literal%0A%C2%A0%C2%A0%C2%A0%C2%A0height%3A%20number%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0weight%3A%20number%3B%0A%7D%0A%0Ainterface%20Animal%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0kind%3A%20%22animal%22%3B%20%2F%2F%20Shared%20string%20literal%0A%C2%A0%C2%A0%C2%A0%C2%A0color%3A%20string%3B%0A%7D%0Atype%20Species%20%3D%20Human%20%7C%20Animal%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>interface Human {
 kind: "human"; // Shared string literal
 height: number;
 weight: number;
}

interface Animal {
 kind: "animal"; // Shared string literal
 color: string;
}
type Species = Human | Animal;</code></pre>
Trong đoạn code tr&ecirc;n, <code>Human</code> v&agrave; <code>Animal</code> c&oacute; một th&agrave;nh vi&ecirc;n chung l&agrave; <code>kind</code>. T&ecirc;n th&agrave;nh vi&ecirc;n c&oacute; thể l&agrave; bất cứ thứ g&igrave;, miễn l&agrave; hai interface c&oacute; một th&agrave;nh vi&ecirc;n chung. Điều n&agrave;y l&agrave; do trước khi sử dụng trường ph&acirc;n loại, TypeScript cho ph&eacute;p truy cập v&agrave;o c&aacute;c trường thuộc t&iacute;nh chung. Trong v&iacute; dụ dưới đ&acirc;y, chỉ c&oacute; <code>kind</code> c&oacute; thể được truy cập m&agrave; kh&ocirc;ng cần sử dụng trường ph&acirc;n loại tr&ecirc;n d&ograve;ng 16.
<pre class="language-ts" data-content="interface%20Human%20%7B%0A%C2%A0%C2%A0kind%3A%20%22human%22%3B%20%2F%2F%20Shared%20string%20literal%0A%C2%A0%C2%A0height%3A%20number%3B%0A%C2%A0%C2%A0weight%3A%20number%3B%0A%7D%0A%0Ainterface%20Animal%20%7B%0A%C2%A0%C2%A0kind%3A%20%22animal%22%3B%20%2F%2F%20Shared%20string%20literal%0A%C2%A0%C2%A0color%3A%20string%3B%0A%7D%0Atype%20Species%20%3D%20Human%20%7C%20Animal%3B%0A%0Alet%20a%3A%20Human%20%3D%20%7B%20kind%3A%20%22human%22%2C%20height%3A%2072%2C%20weight%3A%20150%20%7D%3B%0A%0Afunction%20printData(species%3A%20Species)%3A%20void%20%7B%0A%C2%A0%C2%A0console.log(species.kind)%3B%20%2F%2F%20Only%20kind%20is%20available%0A%7D%0A%0AprintData(a)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>interface Human {
 kind: "human"; // Shared string literal
 height: number;
 weight: number;
}

interface Animal {
 kind: "animal"; // Shared string literal
 color: string;
}
type Species = Human | Animal;

let a: Human = { kind: "human", height: 72, weight: 150 };

function printData(species: Species): void {
 console.log(species.kind); // Only kind is available
}

printData(a);</code></pre>
<h2 style="text-align: justify;">Thu hẹp kiểu</h2>
Bằng c&aacute;ch so s&aacute;nh trường thuộc t&iacute;nh chung, trong trường hợp n&agrave;y l&agrave; <code>kind</code>, v&agrave; tạo một điều kiện, kiểu union bao gồm hai kiểu được thu hẹp th&agrave;nh một kiểu duy nhất, từ đ&oacute; cung cấp gợi &yacute; cho TypeScript về tất cả c&aacute;c trường thuộc t&iacute;nh của kiểu đ&oacute;.
Trong v&iacute; dụ sau, d&ograve;ng 17 thu hẹp kiểu th&agrave;nh interface <code>Human</code>. Do đ&oacute;, d&ograve;ng 18 c&oacute; thể truy cập tất cả c&aacute;c th&agrave;nh vi&ecirc;n của <code>Human</code>. Tương tự, d&ograve;ng 19 thu hẹp kiểu th&agrave;nh interface <code>Animal</code> v&agrave; d&ograve;ng 20 c&oacute; thể truy cập tất cả c&aacute;c th&agrave;nh vi&ecirc;n của <code>Animal</code>.
<pre class="language-ts" data-content="interface%20Human%20%7B%0A%C2%A0%C2%A0kind%3A%20%22human%22%3B%0A%C2%A0%C2%A0height%3A%20number%3B%0A%C2%A0%C2%A0weight%3A%20number%3B%0A%7D%0A%0Ainterface%20Animal%20%7B%0A%C2%A0%C2%A0kind%3A%20%22animal%22%3B%0A%C2%A0%C2%A0color%3A%20string%3B%0A%7D%0Atype%20Species%20%3D%20Human%20%7C%20Animal%3B%0A%0Alet%20a%3A%20Human%20%3D%20%7B%20kind%3A%20%22human%22%2C%20height%3A%2072%2C%20weight%3A%20150%20%7D%3B%0A%0Afunction%20printData(species%3A%20Species)%3A%20void%20%7B%0A%C2%A0%C2%A0console.log(species.kind)%3B%20%2F%2F%20Only%20kind%20is%20available%0A%C2%A0%C2%A0if%20(species.kind%20%3D%3D%20%22human%22)%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0console.log(%60I%20am%20a%20human%20with%20the%20height%20of%C2%A0%20%24%7Bspecies.height%7D%60)%3B%0A%C2%A0%C2%A0%7D%20else%20if%20(species.kind%20%3D%3D%20%22animal%22)%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0console.log(%60I%20am%20an%20animal%20with%20the%20color%20of%C2%A0%20%24%7Bspecies.color%7D%60)%3B%0A%C2%A0%C2%A0%7D%0A%7D%0A%0AprintData(a)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>interface Human {
 kind: "human";
 height: number;
 weight: number;
}

interface Animal {
 kind: "animal";
 color: string;
}
type Species = Human | Animal;

let a: Human = { kind: "human", height: 72, weight: 150 };

function printData(species: Species): void {
 console.log(species.kind); // Only kind is available
 if (species.kind == "human"){
 console.log(`I am a human with the height of ${species.height}`);
 } else if (species.kind == "animal"){
 console.log(`I am an animal with the color of ${species.color}`);
 }
}

printData(a);</code></pre>
<h2 style="text-align: justify;">Thu hẹp kiểu v&agrave; kế thừa</h2>
Việc sử dụng chuỗi hằng chung trong c&aacute;c interface kh&aacute;c nhau kh&ocirc;ng chỉ hữu &iacute;ch cho so s&aacute;nh kiểu, như được giải th&iacute;ch ở tr&ecirc;n, m&agrave; c&ograve;n cho ph&eacute;p thu hẹp kiểu union xuống một kiểu cụ thể.
Tuy nhi&ecirc;n, việc sử dụng trường ph&acirc;n loại c&oacute; một hạn chế khi l&agrave;m việc với kế thừa. Với kế thừa, ta kh&ocirc;ng thể c&oacute; nhiều trường c&ugrave;ng t&ecirc;n nhưng kh&aacute;c kiểu.
<pre class="language-ts" data-content="interface%20Human%20%7B%0A%C2%A0%C2%A0kind%3A%20%22human%22%3B%0A%C2%A0%C2%A0height%3A%20number%3B%0A%C2%A0%C2%A0weight%3A%20number%3B%0A%7D%0A%0Ainterface%20Animal%20%7B%0A%C2%A0%C2%A0kind%3A%20%22animal%22%3B%0A%C2%A0%C2%A0color%3A%20string%3B%0A%7D%0A%0Ainterface%20SuperHumanAnimal%20extends%20Human%2C%20Animal%20%7B%0A%0A%7D" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>interface Human {
 kind: "human";
 height: number;
 weight: number;
}

interface Animal {
 kind: "animal";
 color: string;
}

interface SuperHumanAnimal extends Human, Animal {

}</code></pre>
Đoạn code tr&ecirc;n kh&ocirc;ng bi&ecirc;n dịch được v&agrave; đưa ra lỗi: &lsquo;Named property kind of types Human and Animal are not identical&rsquo;. Mẫu sử dụng trường ph&acirc;n loại hoạt động tốt cho c&aacute;c trường hợp đơn giản, nhưng n&oacute; gặp vấn đề khi c&aacute;c kiểu được kết hợp với nhau. V&igrave; vậy, ta kh&ocirc;ng n&ecirc;n sử dụng trường ph&acirc;n loại như một giải ph&aacute;p chung cho tất cả trường hợp m&agrave; cần xem x&eacute;t cẩn thận dựa tr&ecirc;n t&igrave;nh huống cụ thể.

Kiểm tra kiểu và interface bằng trường phân loại