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 về kiểu dẫn xuất Extract.
<h2 style="text-align: justify;">Giới thiệu kiểu Extract</h2>
Kiểu dẫn xuất tiếp theo l&agrave; <code>Extract</code>. N&oacute; cho ph&eacute;p ta tr&iacute;ch xuất kiểu dữ liệu chung từ một tập hợp c&aacute;c kiểu. Đoạn code sau đ&acirc;y cho thấy đối số generic đầu ti&ecirc;n c&oacute; ba biến (<code>string</code>, <code>string[]</code> v&agrave; <code>number</code>) v&agrave; kiểu generic thứ hai l&agrave; <code>unknown[]</code>, tức l&agrave; bất kỳ kiểu mảng n&agrave;o. <code>Extract</code> trả về kiểu <code>string[] | number[]</code> v&igrave; đ&oacute; l&agrave; hai kiểu duy nhất thỏa m&atilde;n điều kiện l&agrave; kiểu mảng.
<pre class="language-ts" data-content="type%20OnlyArrayType%20%3D%20Extract%3Cstring%20%7C%20string%5B%5D%20%7C%20number%5B%5D%2C%20unknown%5B%5D%3E%3B%0A%0Aconst%20var1%3A%20OnlyArrayType%20%3D%20%5B%22Element1%22%5D%3B%0Aconst%20var2%3A%20OnlyArrayType%20%3D%20%5B1%5D%3B%0A%2F%2F%20const%20var3%3A%20OnlyArrayType%20%3D%20%22No%22%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>type OnlyArrayType = Extract&lt;string | string[] | number[], unknown[]&gt;;

const var1: OnlyArrayType = ["Element1"];
const var2: OnlyArrayType = [1];
// const var3: OnlyArrayType = "No";</code></pre>
<h2 style="text-align: justify;">V&iacute; dụ</h2>
Mặc d&ugrave; v&iacute; dụ tr&ecirc;n nghe c&oacute; vẻ hợp l&yacute; tr&ecirc;n mặt l&yacute; thuyết, nhưng rất kh&oacute; để nắm bắt c&aacute;ch thức hoạt động của <code>Extract</code>. Để hiểu r&otilde; hơn, ch&uacute;ng ta sẽ t&igrave;m hiểu một v&iacute; dụ trực quan. H&atilde;y tạo hai interface kh&aacute;c nhau c&oacute; một hoặc nhiều th&agrave;nh vi&ecirc;n chung. Trong v&iacute; dụ n&agrave;y, th&agrave;nh vi&ecirc;n đ&oacute; l&agrave; <code>name: string</code>.
<pre class="language-ts" data-content="interface%20Animal%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0name%3A%20string%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0sound%3A%20string%3B%0A%7D%0Ainterface%20Human%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0name%3A%20string%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0nickname%3A%20string%3B%0A%7D" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>interface Animal {
 name: string;
 sound: string;
}
interface Human {
 name: string;
 nickname: string;
}</code></pre>
H&atilde;y tạo một h&agrave;m nhận c&aacute;c th&agrave;nh vi&ecirc;n chung của một tập hợp c&aacute;c kiểu đ&atilde; được x&aacute;c định; v&iacute; dụ: c&aacute;c th&agrave;nh vi&ecirc;n chung của <code>Animal</code> v&agrave; <code>Human</code>. Để x&aacute;c định th&agrave;nh vi&ecirc;n chung, ch&uacute;ng ta sẽ sử dụng <code>Extract</code>. D&ograve;ng code sau tương đương với việc định nghĩa kiểu <code>LivingThing = name</code>, đ&oacute; l&agrave; th&agrave;nh vi&ecirc;n chung duy nhất giữa hai interface.
<pre class="language-ts" data-content="type%20LivingThing%20%3D%20Extract%3Ckeyof%20Animal%2C%20keyof%20Human%3E%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>type LivingThing = Extract&lt;keyof Animal, keyof Human&gt;;</code></pre>
Bằng c&aacute;ch kết hợp <code>Record</code>, ch&uacute;ng ta c&oacute; thể x&acirc;y dựng một kiểu mới chứa c&aacute;c th&agrave;nh vi&ecirc;n chung của hai kiểu.
<pre class="language-ts" data-content="type%20LivingThing%20%3D%20Extract%3Ckeyof%20Animal%2C%20keyof%20Human%3E%3B%0Afunction%20sayMyName(who%3A%20Record%3CLivingThing%2C%20string%3E)%3A%20void%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0console.log(who.name)%3B%0A%7D" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>type LivingThing = Extract&lt;keyof Animal, keyof Human&gt;;
function sayMyName(who: Record&lt;LivingThing, string&gt;): void {
 console.log(who.name);
}</code></pre>
Kết quả l&agrave; bạn c&oacute; thể tạo một h&agrave;m mong đợi một kiểu thực tế kh&ocirc;ng tồn tại nhưng l&agrave; kiểu chung giữa hai kiểu.
<pre class="language-ts" data-content="interface%20Animal%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0name%3A%20string%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0sound%3A%20string%3B%0A%7D%0Ainterface%20Human%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0name%3A%20string%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0nickname%3A%20string%3B%0A%7D%0A%0Atype%20LivingThing%20%3D%20Extract%3Ckeyof%20Animal%2C%20keyof%20Human%3E%3B%0Afunction%20sayMyName(who%3A%20Record%3CLivingThing%2C%20string%3E)%3A%20void%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0console.log(who.name)%3B%0A%7D%0Aconst%20animal%3A%20Animal%20%3D%20%7B%20name%3A%20%22Lion%22%2C%20sound%3A%20%22Rawwwhhh%22%20%7D%3B%0Aconst%20human%3A%20Human%20%3D%20%7B%20name%3A%20%22Jacob%22%2C%20nickname%3A%20%22Jaco-bee%22%20%7D%3B%0AsayMyName(animal)%3B%0AsayMyName(human)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>interface Animal {
 name: string;
 sound: string;
}
interface Human {
 name: string;
 nickname: string;
}

type LivingThing = Extract&lt;keyof Animal, keyof Human&gt;;
function sayMyName(who: Record&lt;LivingThing, string&gt;): void {
 console.log(who.name);
}
const animal: Animal = { name: "Lion", sound: "Rawwwhhh" };
const human: Human = { name: "Jacob", nickname: "Jaco-bee" };
sayMyName(animal);
sayMyName(human);</code></pre>
<h2 style="text-align: justify;">Ưu điểm của kiểu Extract</h2>
Ngo&agrave;i ra, nếu hai kiểu dữ liệu được cập nhật v&agrave; thay đổi trong tương lai, h&agrave;m sẽ vẫn đảm bảo t&iacute;nh an to&agrave;n về kiểu. V&iacute; dụ: nếu cả hai kiểu th&ecirc;m một th&agrave;nh vi&ecirc;n mới c&oacute; kiểu chuỗi, h&agrave;m sẽ cho ph&eacute;p truy cập v&agrave;o th&agrave;nh vi&ecirc;n đ&oacute;. Xem d&ograve;ng 14:
<pre class="language-ts" data-content="interface%20Animal%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0name%3A%20string%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0gender%3A%20string%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0sound%3A%20string%3B%0A%7D%0Ainterface%20Human%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0name%3A%20string%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0gender%3A%20string%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0nickname%3A%20string%3B%0A%7D%0A%0Atype%20LivingThing%20%3D%20Extract%3Ckeyof%20Animal%2C%20keyof%20Human%3E%3B%0Afunction%20sayMyName(who%3A%20Record%3CLivingThing%2C%20string%3E)%3A%20void%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0console.log(who.name%20%2B%22%20is%20of%20type%20%22%20%2B%20who.gender)%3B%0A%7D%0Aconst%20animal%3A%20Animal%20%3D%20%7B%20name%3A%20%22Lion%22%2C%20sound%3A%20%22Rawwwhhh%22%2C%20gender%3A%20%22Male%22%20%7D%3B%0Aconst%20human%3A%20Human%20%3D%20%7B%20name%3A%20%22Jacob%22%2C%20nickname%3A%20%22Jaco-bee%22%2C%20gender%3A%20%22Boy%22%20%7D%3B%0AsayMyName(animal)%3B%0AsayMyName(human)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>interface Animal {
 name: string;
 gender: string;
 sound: string;
}
interface Human {
 name: string;
 gender: string;
 nickname: string;
}

type LivingThing = Extract&lt;keyof Animal, keyof Human&gt;;
function sayMyName(who: Record&lt;LivingThing, string&gt;): void {
 console.log(who.name +" is of type " + who.gender);
}
const animal: Animal = { name: "Lion", sound: "Rawwwhhh", gender: "Male" };
const human: Human = { name: "Jacob", nickname: "Jaco-bee", gender: "Boy" };
sayMyName(animal);
sayMyName(human);</code></pre>
Kiểu dẫn xuất <code>Extract</code> kh&ocirc;ng đơn giản như c&aacute;c kiểu đ&atilde; thảo luận trước đ&oacute;. N&oacute; chủ yếu được sử dụng kết hợp với c&aacute;c kiểu dẫn xuất kh&aacute;c cũng như với c&aacute;c kiểu điều kiện cho những trường hợp phức tạp hơn. C&aacute;c v&iacute; dụ được tr&igrave;nh b&agrave;y trong b&agrave;i học n&agrave;y minh họa kh&aacute;i niệm cơ bản của <code>Extract</code>. Một nh&agrave; ph&aacute;t triển nhạy b&eacute;n sẽ biết tr&iacute;ch xuất một interface chung giữa hai kiểu v&agrave; đạt được kết quả tốt hơn bằng c&aacute;ch tr&iacute;ch xuất v&agrave; đặt t&ecirc;n cho interface một c&aacute;ch r&otilde; r&agrave;ng. Tuy nhi&ecirc;n, <code>Extract</code> đ&oacute;ng một vai tr&ograve; quan trọng trong c&aacute;c t&igrave;nh huống m&agrave; h&agrave;m cần thực hiện thao t&aacute;c tr&ecirc;n kiểu generic m&agrave; kh&ocirc;ng cần phải hiểu về logic kinh doanh.

Kiểu Extract