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 sẽ hướng dẫn c&aacute;ch kiểm tra kiểu bằng c&aacute;ch x&acirc;y dựng thủ c&ocirc;ng một thuật to&aacute;n c&oacute; thể t&igrave;m ra c&aacute;c đặc điểm duy nhất trong cấu tr&uacute;c.
<h2 style="text-align: justify;">H&agrave;m do người d&ugrave;ng định nghĩa</h2>
H&agrave;m kiểm tra kiểu do người d&ugrave;ng định nghĩa l&agrave; một h&agrave;m kiểm tra c&aacute;c kh&iacute;a cạnh cụ thể trong cấu tr&uacute;c của đối tượng để x&aacute;c định kiểu dữ liệu của đối tượng. Khi sử dụng h&agrave;m n&agrave;y, bạn kh&ocirc;ng cần thay đổi kiểu bằng c&aacute;ch sử dụng một trường thuộc t&iacute;nh được đ&aacute;nh dấu hoặc phụ thuộc v&agrave;o trường ph&acirc;n loại. Tuy nhi&ecirc;n, nhược điểm l&agrave; bạn kh&ocirc;ng thể sử dụng c&aacute;c h&agrave;m c&oacute; khả năng kiểm tra mọi kiểu dữ liệu tiềm năng.
Đoạn code sau định nghĩa một h&agrave;m tr&ecirc;n d&ograve;ng 21, h&agrave;m nhận một tham số duy nhất c&oacute; kiểu <code>any</code>. H&agrave;m kiểm tra xem đối tượng c&oacute; chứa hai th&agrave;nh vi&ecirc;n hay kh&ocirc;ng v&agrave; v&igrave; tham số c&oacute; kiểu <code>any</code> n&ecirc;n h&agrave;m c&oacute; thể nhận đối tượng c&oacute; kiểu bất kỳ. Khi h&agrave;m trả về <code>true</code>, TypeScript sẽ thu hẹp kiểu của tham số th&agrave;nh kiểu được chỉ định sau từ kh&oacute;a <code>is</code>. Tr&ecirc;n d&ograve;ng 21, h&agrave;m thu hẹp kiểu th&agrave;nh <code>Person</code>.
<pre class="language-ts" data-content="interface%20Person%20%7B%0A%C2%A0%C2%A0firstName%3A%20string%3B%0A%C2%A0%C2%A0lastName%3A%20string%3B%0A%7D%0A%0Ainterface%20Animal%20%7B%0A%C2%A0%C2%A0name%3A%20string%3B%0A%C2%A0%C2%A0numberOfLegs%3A%20number%3B%0A%7D%0A%0Alet%20p1%3A%20Person%20%3D%20%7B%0A%C2%A0%C2%A0firstName%3A%20%22First%22%2C%0A%C2%A0%C2%A0lastName%3A%20%22Last%22%0A%7D%3B%0A%0Alet%20p2%3A%20Animal%20%3D%20%7B%0A%C2%A0%C2%A0name%3A%20%22Tiger%22%2C%0A%C2%A0%C2%A0numberOfLegs%3A%204%0A%7D%3B%0A%0Afunction%20isPerson(obj%3A%20any)%3A%20obj%20is%20Person%20%7B%0A%C2%A0%C2%A0return%20obj.firstName%20!%3D%3D%20undefined%20%26%26%20obj.lastName%20!%3D%3D%20undefined%3B%0A%7D%0A%0Aconsole.log(isPerson(p1))%3B%20%2F%2F%20A%20Person%0Aconsole.log(isPerson(p2))%3B%20%2F%2F%20Not%20a%20Person%2C%20does%20not%20have%20firstName%20and%20LastName" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>interface Person {
 firstName: string;
 lastName: string;
}

interface Animal {
 name: string;
 numberOfLegs: number;
}

let p1: Person = {
 firstName: "First",
 lastName: "Last"
};

let p2: Animal = {
 name: "Tiger",
 numberOfLegs: 4
};

function isPerson(obj: any): obj is Person {
 return obj.firstName !== undefined &amp;&amp; obj.lastName !== undefined;
}

console.log(isPerson(p1)); // A Person
console.log(isPerson(p2)); // Not a Person, does not have firstName and LastName</code></pre>
Nếu so s&aacute;nh được thực hiện trong một union bao gồm hai kiểu kh&aacute;c nhau th&igrave; TypeScript c&oacute; thể sử dụng c&acirc;u lệnh <code>else</code> để thu hẹp kiểu th&agrave;nh kiểu c&ograve;n lại. Trong v&iacute; dụ dưới đ&acirc;y, c&acirc;u lệnh <code>if</code> tr&ecirc;n d&ograve;ng 26 thu hẹp kiểu của đối tượng th&agrave;nh <code>Person</code> trong phạm vi của n&oacute; nếu h&agrave;m <code>isPerson</code> trả về <code>true</code>. Trong phạm vi của nh&aacute;nh <code>else</code>, TypeScript sẽ thu hẹp kiểu th&agrave;nh <code>Animal</code>.
<pre class="language-ts" data-content="interface%20Person%20%7B%0A%C2%A0%C2%A0firstName%3A%20string%3B%0A%C2%A0%C2%A0lastName%3A%20string%3B%0A%7D%0A%0Ainterface%20Animal%20%7B%0A%C2%A0%C2%A0name%3A%20string%3B%0A%C2%A0%C2%A0numberOfLegs%3A%20number%3B%0A%7D%0A%0Alet%20p1%3A%20Person%20%3D%20%7B%0A%C2%A0%C2%A0firstName%3A%20%22First%22%2C%0A%C2%A0%C2%A0lastName%3A%20%22Last%22%0A%7D%3B%0A%0Alet%20p2%3A%20Animal%20%3D%20%7B%0A%C2%A0%C2%A0name%3A%20%22Tiger%22%2C%0A%C2%A0%C2%A0numberOfLegs%3A%204%0A%7D%3B%0A%0Afunction%20isPerson(obj%3A%20any)%3A%20obj%20is%20Person%20%7B%0A%C2%A0%C2%A0return%20obj.firstName%20!%3D%3D%20undefined%20%26%26%20obj.lastName%20!%3D%3D%20undefined%3B%0A%7D%0A%0Afunction%20show(p%3A%20Person%20%7C%20Animal)%3A%20void%20%7B%0A%C2%A0%C2%A0if%20(isPerson(p))%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0console.log(%60It's%20a%20person%20with%20a%20first%20name%3A%20%24%7Bp.firstName%7D%2C%20and%20last%3A%20%24%7Bp.lastName%7D%60)%0A%C2%A0%C2%A0%7D%20else%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0console.log(%60It's%20an%20animal%3A%20%24%7Bp.name%7D%60)%0A%C2%A0%C2%A0%7D%0A%7D%0A%0Ashow(p1)%3B%0Ashow(p2)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>interface Person {
 firstName: string;
 lastName: string;
}

interface Animal {
 name: string;
 numberOfLegs: number;
}

let p1: Person = {
 firstName: "First",
 lastName: "Last"
};

let p2: Animal = {
 name: "Tiger",
 numberOfLegs: 4
};

function isPerson(obj: any): obj is Person {
 return obj.firstName !== undefined &amp;&amp; obj.lastName !== undefined;
}

function show(p: Person | Animal): void {
 if (isPerson(p)) {
 console.log(`It's a person with a first name: ${p.firstName}, and last: ${p.lastName}`)
 } else {
 console.log(`It's an animal: ${p.name}`)
 }
}

show(p1);
show(p2);</code></pre>
<h2 style="text-align: justify;">Từ kh&oacute;a in</h2>
Thay v&igrave; sử dụng <code>undefined</code>, ta c&oacute; một c&aacute;ch kh&aacute;c để kiểm tra sự tồn tại của trường thuộc t&iacute;nh l&agrave; sử dụng to&aacute;n tử <code>in</code>, n&oacute; sẽ trả về <code>true</code> nếu trường thuộc t&iacute;nh tồn tại. Đoạn code sau định nghĩa một h&agrave;m t&ecirc;n l&agrave; <code>isPerson</code>. Lần n&agrave;y, h&agrave;m sử dụng <code>in</code> tr&ecirc;n d&ograve;ng 22 để x&aacute;c minh xem một th&agrave;nh vi&ecirc;n c&oacute; tồn tại hay kh&ocirc;ng.
<pre class="language-ts" data-content="interface%20Person%20%7B%0A%C2%A0%C2%A0firstName%3A%20string%3B%0A%C2%A0%C2%A0lastName%3A%20string%3B%0A%7D%0A%0Ainterface%20Animal%20%7B%0A%C2%A0%C2%A0name%3A%20string%3B%0A%C2%A0%C2%A0numberOfLegs%3A%20number%3B%0A%7D%0A%0Alet%20p1%3A%20Person%20%3D%20%7B%0A%C2%A0%C2%A0firstName%3A%20%22First%22%2C%0A%C2%A0%C2%A0lastName%3A%20%22Last%22%0A%7D%3B%0A%0Alet%20p2%3A%20Animal%20%3D%20%7B%0A%C2%A0%C2%A0name%3A%20%22Tiger%22%2C%0A%C2%A0%C2%A0numberOfLegs%3A%204%0A%7D%3B%0A%0Afunction%20isPerson(obj%3A%20any)%3A%20obj%20is%20Person%20%7B%0A%C2%A0%C2%A0return%20%22firstName%22%20in%20obj%3B%0A%7D%0A%0Afunction%20show(p%3A%20Person%20%7C%20Animal)%3A%20void%20%7B%0A%C2%A0%C2%A0if%20(isPerson(p))%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0console.log(%60It's%20a%20person%20with%20a%20first%20name%3A%20%24%7Bp.firstName%7D%2C%20and%20last%3A%20%24%7Bp.lastName%7D%60)%0A%C2%A0%C2%A0%7D%20else%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0console.log(%60It's%20an%20animal%3A%20%24%7Bp.name%7D%60)%0A%C2%A0%C2%A0%7D%0A%7D%0A%0Ashow(p1)%3B%0Ashow(p2)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>interface Person {
 firstName: string;
 lastName: string;
}

interface Animal {
 name: string;
 numberOfLegs: number;
}

let p1: Person = {
 firstName: "First",
 lastName: "Last"
};

let p2: Animal = {
 name: "Tiger",
 numberOfLegs: 4
};

function isPerson(obj: any): obj is Person {
 return "firstName" in obj;
}

function show(p: Person | Animal): void {
 if (isPerson(p)) {
 console.log(`It's a person with a first name: ${p.firstName}, and last: ${p.lastName}`)
 } else {
 console.log(`It's an animal: ${p.name}`)
 }
}

show(p1);
show(p2);</code></pre>
Mặc d&ugrave; việc sử dụng một h&agrave;m chuy&ecirc;n biệt để xử l&yacute; kiểu l&agrave; c&aacute;ch l&agrave;m gọn g&agrave;ng, tuy nhi&ecirc;n, ta c&oacute; thể sử dụng <code>in</code> trực tiếp trong c&aacute;c h&agrave;m kiểm tra kiểu do người d&ugrave;ng định nghĩa, sau đ&oacute; TypeScript sẽ sử dụng to&aacute;n tử để thu hẹp kiểu. Đoạn code sau sẽ thu hẹp kiểu của đối tượng th&agrave;nh <code>Person</code> khi gặp một kiểu union tr&ecirc;n d&ograve;ng 23 v&agrave; trong khối <code>else</code> tr&ecirc;n d&ograve;ng 25, TypeScript thu hẹp kiểu th&agrave;nh <code>Animal</code>.
<pre class="language-ts" data-content="interface%20Person%20%7B%0A%C2%A0%C2%A0firstName%3A%20string%3B%0A%C2%A0%C2%A0lastName%3A%20string%3B%0A%7D%0A%0Ainterface%20Animal%20%7B%0A%C2%A0%C2%A0name%3A%20string%3B%0A%C2%A0%C2%A0numberOfLegs%3A%20number%3B%0A%7D%0A%0Alet%20p1%3A%20Person%20%3D%20%7B%0A%C2%A0%C2%A0firstName%3A%20%22First%22%2C%0A%C2%A0%C2%A0lastName%3A%20%22Last%22%0A%7D%3B%0A%0Alet%20p2%3A%20Animal%20%3D%20%7B%0A%C2%A0%C2%A0name%3A%20%22Tiger%22%2C%0A%C2%A0%C2%A0numberOfLegs%3A%204%0A%7D%3B%0A%0Afunction%20show(p%3A%20Person%20%7C%20Animal)%3A%20void%20%7B%0A%C2%A0%C2%A0if%20(%22firstName%22%20in%20p)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0console.log(%60It's%20a%20person%20with%20a%20first%20name%3A%20%24%7Bp.firstName%7D%2C%20and%20last%3A%20%24%7Bp.lastName%7D%60)%0A%C2%A0%C2%A0%7D%20else%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0console.log(%60It's%20an%20animal%3A%20%24%7Bp.name%7D%60)%0A%C2%A0%C2%A0%7D%0A%7D%0A%0Ashow(p1)%3B%0Ashow(p2)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>interface Person {
 firstName: string;
 lastName: string;
}

interface Animal {
 name: string;
 numberOfLegs: number;
}

let p1: Person = {
 firstName: "First",
 lastName: "Last"
};

let p2: Animal = {
 name: "Tiger",
 numberOfLegs: 4
};

function show(p: Person | Animal): void {
 if ("firstName" in p) {
 console.log(`It's a person with a first name: ${p.firstName}, and last: ${p.lastName}`)
 } else {
 console.log(`It's an animal: ${p.name}`)
 }
}

show(p1);
show(p2);</code></pre>
Vấn đề với việc sử dụng <code>in</code> l&agrave; khi đối tượng trở n&ecirc;n phức tạp hơn, ta cần thực hiện nhiều so s&aacute;nh của nhiều trường thuộc t&iacute;nh, l&agrave;m cho c&acirc;u lệnh <code>if</code> trở n&ecirc;n d&agrave;i d&ograve;ng v&agrave; tr&ugrave;ng lặp nhiều lần. Do đ&oacute;, bạn kh&ocirc;ng n&ecirc;n sử dụng to&aacute;n tử <code>in</code> v&agrave; c&acirc;u lệnh điều kiện ở nhiều nơi trong m&atilde; nguồn, tuy nhi&ecirc;n, đ&acirc;y vẫn l&agrave; một giải ph&aacute;p được hỗ trợ bởi TypeScript.

Kiểm tra interface bằng hàm kiểm tra do người dùng định nghĩa