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 về sự kh&aacute;c biệt giữa b&iacute; danh kiểu v&agrave; interface.
Qua c&aacute;c phi&ecirc;n bản ph&aacute;t triển của TypeScript, ranh giới kh&aacute;c biệt giữa b&iacute; danh kiểu v&agrave; interface đang dần trở n&ecirc;n mờ nhạt. Tuy nhi&ecirc;n, b&ecirc;n cạnh đ&oacute; vẫn c&ograve;n tồn tại một số điểm kh&aacute;c biệt đ&aacute;ng ch&uacute; &yacute;.
<h2 style="text-align: justify;">Kh&aacute;c biệt với lớp</h2>
Ta chỉ c&oacute; thể triển khai interface tr&ecirc;n lớp, nhưng kh&ocirc;ng thể thực hiện triển khai kiểu. Interface c&oacute; thể được triển khai bất kỳ l&uacute;c n&agrave;o, nhưng kiểu kh&ocirc;ng thể chứa một kiểu union.
Sử dụng union trong b&iacute; danh kiểu c&oacute; thể g&acirc;y kh&oacute; khăn cho việc t&aacute;i sử dụng c&aacute;c kiểu đ&oacute; trong một số t&igrave;nh huống cụ thể. V&iacute; dụ sau hoạt động v&igrave; kh&ocirc;ng c&oacute; union n&agrave;o tr&ecirc;n d&ograve;ng 1. Do đ&oacute;, d&ograve;ng 6 bi&ecirc;n dịch th&agrave;nh c&ocirc;ng. D&ograve;ng 10 vẫn hợp lệ v&igrave; interface lu&ocirc;n c&oacute; thể được triển khai bởi lớp.
<pre class="language-ts" data-content="type%20Person%20%3D%20%7B%20name%3A%20string%20%7D%3B%0Ainterface%20Person2%20%7B%0A%C2%A0%C2%A0name%3A%20string%3B%0A%7D%0A%0Aclass%20Mother%20implements%20Person%20%7B%0A%C2%A0%C2%A0name%3A%20string%20%3D%20%22%22%3B%0A%7D%0A%0Aclass%20Father%20implements%20Person2%20%7B%0A%C2%A0%C2%A0name%3A%20string%20%3D%20%22%22%3B%0A%7D" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>type Person = { name: string };
interface Person2 {
 name: string;
}

class Mother implements Person {
 name: string = "";
}

class Father implements Person2 {
 name: string = "";
}</code></pre>
Đoạn code dưới đ&acirc;y kh&ocirc;ng bi&ecirc;n dịch được v&igrave; kiểu l&agrave; một union tr&ecirc;n d&ograve;ng 1. Union cho ph&eacute;p gi&aacute; trị thuộc một kiểu hoặc kiểu kh&aacute;c, điều đ&oacute; l&agrave;m cho h&agrave;nh vi triển khai của m&atilde; nguồn trở n&ecirc;n kh&oacute; dự đo&aacute;n v&agrave; kh&ocirc;ng r&otilde; r&agrave;ng. V&igrave; vậy, code kh&ocirc;ng hoạt động.
<pre class="language-ts" data-content="type%20Person%20%3D%20%7B%20name%3A%20string%20%7D%20%7C%20string%3B%0A%0Aclass%20Mother%20implements%20Person%20%7B%0A%C2%A0%C2%A0name%3A%20string%20%3D%20%22%22%3B%0A%7D" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>type Person = { name: string } | string;

class Mother implements Person {
 name: string = "";
}</code></pre>
<h2 style="text-align: justify;">Kh&aacute;c biệt với interface</h2>
Một interface c&oacute; thể kế thừa từ bất kỳ interface n&agrave;o. Interface c&oacute; thể kế thừa từ kiểu nhưng kh&ocirc;ng &aacute;p dụng cho mọi kiểu. Mặt kh&aacute;c, ta kh&ocirc;ng thể kế thừa từ một kiểu chứa union. Điều n&agrave;y khiến cho việc thao t&aacute;c với interface trở n&ecirc;n dễ d&agrave;ng hơn v&igrave; n&oacute; kh&ocirc;ng kiểm tra xem kiểu gốc c&oacute; chứa union hay kh&ocirc;ng.
<pre class="language-ts" data-content="interface%20Person%20%7B%20name%3A%20string%20%7D%3B%0Ainterface%20Father%20extends%20Person%20%7B%20numberOfChildren%3A%20number%20%7D%3B%0Alet%20f1%3A%20Father%20%3D%20%7B%20name%3A%20%22MisterF1%22%2C%20numberOfChildren%3A%202%20%7D%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>interface Person { name: string };
interface Father extends Person { numberOfChildren: number };
let f1: Father = { name: "MisterF1", numberOfChildren: 2 };</code></pre>
Đoạn code sau bi&ecirc;n dịch được v&igrave; n&oacute; kh&ocirc;ng c&oacute; union.
<pre class="language-ts" data-content="type%20Person%20%3D%20%7B%20name%3A%20string%20%7D%3B%0Ainterface%20Father%20extends%20Person%20%7B%20numberOfChildren%3A%20number%20%7D%3B%0Alet%20f1%3A%20Father%20%3D%20%7B%20name%3A%20%22MisterF1%22%2C%20numberOfChildren%3A%202%20%7D%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>type Person = { name: string };
interface Father extends Person { numberOfChildren: number };
let f1: Father = { name: "MisterF1", numberOfChildren: 2 };</code></pre>
Tuy nhi&ecirc;n, đoạn code sau kh&ocirc;ng bi&ecirc;n dịch được:
<pre class="language-ts" data-content="type%20Person%20%3D%20%7B%20name%3A%20string%20%7D%20%7C%20string%3B%0Ainterface%20Father%20extends%20Person%20%7B%20numberOfChildren%3A%20number%20%7D%3B%0Alet%20f1%3A%20Father%20%3D%20%7B%20name%3A%20%22MisterF1%22%2C%20numberOfChildren%3A%202%20%7D%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>type Person = { name: string } | string;
interface Father extends Person { numberOfChildren: number };
let f1: Father = { name: "MisterF1", numberOfChildren: 2 };</code></pre>
<h2 style="text-align: justify;">Kết hợp c&aacute;c trường thuộc t&iacute;nh</h2>
Khi bạn c&oacute; nhiều khai b&aacute;o interface c&ugrave;ng t&ecirc;n trong m&atilde; nguồn, những trường thuộc t&iacute;nh của c&aacute;c interface sẽ được kết hợp để tạo một interface mới. Kiểu kh&ocirc;ng cho ph&eacute;p h&agrave;nh vi n&agrave;y v&agrave; sẽ đưa ra một ngoại lệ trong qu&aacute; tr&igrave;nh chuyển đổi m&atilde; nguồn. Bạn c&oacute; thể viết nhiều khai b&aacute;o interface c&ugrave;ng t&ecirc;n trong c&ugrave;ng một file hoặc trong nhiều file kh&aacute;c nhau v&agrave; TypeScript sẽ kết hợp c&aacute;c trường thuộc t&iacute;nh tạo ra kiểu kết hợp cuối c&ugrave;ng. Cơ chế n&agrave;y kh&ocirc;ng được &aacute;p dụng với kiểu. Để c&oacute; một kiểu union, ta cần tạo một kiểu mới. Ưu điểm ch&iacute;nh của interface l&agrave; n&oacute; cho ph&eacute;p b&ecirc;n thứ ba mở rộng m&atilde; nguồn hiện c&oacute; được tạo bởi một b&ecirc;n thứ ba kh&aacute;c m&agrave; kh&ocirc;ng cần thay đổi m&atilde; nguồn gốc.
Đoạn code dưới đ&acirc;y định nghĩa interface <code>Person</code> hai lần: d&ograve;ng 1 v&agrave; 5. Trong b&agrave;i học n&agrave;y, hai interface đứng cạnh nhau, nhưng trong c&aacute;c dự &aacute;n thực tế, ch&uacute;ng c&oacute; thể nằm trong hai g&oacute;i kh&aacute;c nhau. Tr&ecirc;n d&ograve;ng 9, để chương tr&igrave;nh c&oacute; thể bi&ecirc;n dịch th&agrave;nh c&ocirc;ng, code phải chứa cả hai trường v&igrave; ch&uacute;ng đều kh&ocirc;ng được đ&aacute;nh dấu l&agrave; t&ugrave;y chọn.
<pre class="language-ts" data-content="interface%20Person%20%7B%20%2F%2F%20This%20interface%20could%20be%20in%20a%20third%20party%20package%0A%C2%A0%C2%A0firstName%3A%20string%3B%0A%7D%0A%0Ainterface%20Person%20%7B%20%2F%2F%20This%20interface%20could%20be%20in%20your%20first%20party%0A%C2%A0%C2%A0lastName%3A%20string%3B%0A%7D%0A%0Alet%20c%3A%20Person%20%3D%20%7B%20firstName%3A%20%22First%22%2C%20lastName%3A%20%22Last%22%20%7D%3B%0A%C4%90o%E1%BA%A1n%20code%20sau%20kh%C3%B4ng%20bi%C3%AAn%20d%E1%BB%8Bch%20%C4%91%C6%B0%E1%BB%A3c%20v%C3%AC%20n%C3%B3%20%C4%91%E1%BB%8Bnh%20ngh%C4%A9a%20hai%20type%20v%E1%BB%9Bi%20c%C3%B9ng%20t%C3%AAn.%0Atype%20PersonType%20%3D%20%7B%0A%C2%A0%C2%A0firstName%3A%20string%3B%0A%7D%0A%0Atype%20PersonType%20%7B%0A%C2%A0%C2%A0lastName%3A%20string%3B%0A%7D%0A%0Alet%20typeP%3A%20PersonType%20%3D%20%7B%20firstName%3A%20%22First%22%2C%20lastName%3A%20%22Last%22%20%7D%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>interface Person { // This interface could be in a third party package
 firstName: string;
}

interface Person { // This interface could be in your first party
 lastName: string;
}

let c: Person = { firstName: "First", lastName: "Last" };
Đoạn code sau kh&ocirc;ng bi&ecirc;n dịch được v&igrave; n&oacute; định nghĩa hai type với c&ugrave;ng t&ecirc;n.
type PersonType = {
 firstName: string;
}

type PersonType {
 lastName: string;
}

let typeP: PersonType = { firstName: "First", lastName: "Last" };</code></pre>
Interface mang lại khả năng linh hoạt tốt hơn v&agrave; do đ&oacute; n&ecirc;n được ưu ti&ecirc;n sử dụng.

Sự khác biệt giữa bí danh kiểu và Interface