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 hướng dẫn c&aacute;ch sử dụng keyof để tr&iacute;ch xuất th&ocirc;ng tin từ một kiểu hoặc interface.
<h2 style="text-align: justify;">Định nghĩa v&agrave; mục ti&ecirc;u</h2>
<code>keyof</code> l&agrave; một kiểu con của chuỗi cho ph&eacute;p ta tr&iacute;ch xuất t&ecirc;n c&aacute;c th&agrave;nh vi&ecirc;n từ một kiểu hoặc interface. Mục ti&ecirc;u ch&iacute;nh của <code>keyof</code> l&agrave; x&aacute;c định một tập hợp c&aacute;c t&ecirc;n th&agrave;nh vi&ecirc;n hợp lệ. V&iacute; dụ: bạn c&oacute; thể tạo một h&agrave;m public nhận chỉ thị dưới dạng chuỗi để linh hoạt hơn. Định nghĩa tham số n&agrave;y dưới dạng chuỗi sẽ cho ph&eacute;p nhận bất cứ thứ g&igrave;. Tuy nhi&ecirc;n, việc sử dụng từ kh&oacute;a <code>keyof</code> theo sau bởi kiểu chứa một union của bốn hướng cơ bản sẽ giới hạn chuỗi được chấp nhận chỉ l&agrave; bốn gi&aacute; trị đ&oacute;.
<pre class="language-ts" data-content="%2F%2F%20Interface's%20members%0Ainterface%20InterfaceWithMembers%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0id%3A%20number%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0title%3A%20string%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0createdBy%3A%20Date%3B%0A%7D%0A%0Aconst%20members%3A%20keyof%20InterfaceWithMembers%20%3D%20%22id%22%3B%20%2F%2F%20Only%20accept%20id%2C%20title%20or%20createdBy%0A%0A%2F%2F%20Type's%20values%0Atype%20TypeToKeyOf%20%3D%20%22north%22%20%7C%20%22south%22%20%7C%20%22east%22%20%7C%20%22west%22%3B%0Afunction%20fKeyOfParameter(direction%3A%20TypeToKeyOf)%20%7B%7D%0A%2F%2FfKeyOfParameter(%22no%22)%3B%20%2F%2F%20Doesn't%20compile%0AfKeyOfParameter(%22north%22)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>// Interface's members
interface InterfaceWithMembers {
 id: number;
 title: string;
 createdBy: Date;
}

const members: keyof InterfaceWithMembers = "id"; // Only accept id, title or createdBy

// Type's values
type TypeToKeyOf = "north" | "south" | "east" | "west";
function fKeyOfParameter(direction: TypeToKeyOf) {}
//fKeyOfParameter("no"); // Doesn't compile
fKeyOfParameter("north");</code></pre>
<h2 style="text-align: justify;">Sử dụng kiểu generic</h2>
Kiểu generic c&oacute; thể sử dụng <code>keyof</code>. V&iacute; dụ: bạn c&oacute; thể tạo một h&agrave;m nhận tham số đầu ti&ecirc;n kiểu <code>T</code> v&agrave; tham số thứ hai kiểu <code>R</code> kế thừa từ <code>keyof T</code>. Việc kế thừa <code>keyof</code> trong tham số thứ hai c&oacute; nghĩa l&agrave; hạn chế gi&aacute; trị c&oacute; thể nhận của đối số đầu ti&ecirc;n. Điều n&agrave;y l&agrave;m cho h&agrave;m trở n&ecirc;n linh hoạt v&agrave; TypeScript cung cấp kiểm tra ho&agrave;n chỉnh trong qu&aacute; tr&igrave;nh thiết kế v&agrave; bi&ecirc;n dịch.
Trong v&iacute; dụ sau, **d&ograve;ng 3-5** cho thấy interface chứa ba th&agrave;nh vi&ecirc;n l&agrave; c&aacute;c gi&aacute; trị chuỗi duy nhất c&oacute; thể truyền l&agrave;m tham số thứ hai. C&aacute;c kiểu <code>K</code> l&agrave; <code>K extends keyof T</code>, xem d&ograve;ng 8. Kiểu trả về của h&agrave;m ở d&ograve;ng 8 l&agrave; kiểu của th&agrave;nh vi&ecirc;n <code>K</code> của đối tượng <code>T</code> được truyền qua tham số.
<pre class="language-ts" data-content="%2F%2F%20Interface's%20members%0Ainterface%20InterfaceWithMembers%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0id%3A%20number%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0title%3A%20string%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0createdBy%3A%20Date%3B%0A%7D%0Aconst%20iWithMembersForKeyOf%3A%20InterfaceWithMembers%20%3D%20%7B%20id%3A%201%2C%20title%3A%20%221%22%2C%20createdBy%3A%20new%20Date()%20%7D%3B%0Afunction%20prop%3CT%2C%20K%20extends%20keyof%20T%3E(obj%3A%20T%2C%20key%3A%20K)%3A%20T%5BK%5D%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20obj%5Bkey%5D%3B%0A%7D%0Aconst%20id%20%3D%20prop(iWithMembersForKeyOf%2C%20%22id%22)%3B%20%2F%2Fthe%20value%201%20of%20type%20number" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>// Interface's members
interface InterfaceWithMembers {
 id: number;
 title: string;
 createdBy: Date;
}
const iWithMembersForKeyOf: InterfaceWithMembers = { id: 1, title: "1", createdBy: new Date() };
function prop&lt;T, K extends keyof T&gt;(obj: T, key: K): T[K] {
 return obj[key];
}
const id = prop(iWithMembersForKeyOf, "id"); //the value 1 of type number</code></pre>
Bạn c&oacute; thể hiểu r&otilde; hơn về c&aacute;ch hoạt động của v&iacute; dụ tr&ecirc;n bằng c&aacute;ch loại bỏ kiểu generic. Trong interface, việc định nghĩa kiểu ở d&ograve;ng 2 bằng c&aacute;ch sử dụng <code>K extends keyof T</code> tương tự như viết <code>K extends InterfaceWithMembers</code> nếu ta loại bỏ phần generic. V&igrave; vậy, <code>K</code> c&oacute; thể l&agrave; một trong ba th&agrave;nh vi&ecirc;n được định nghĩa bởi interface ở d&ograve;ng 2: <code>id</code>, <code>title</code>, <code>createBy</code>. Kiểu trả về <code>T[K]</code> c&oacute; nghĩa l&agrave; lấy kiểu của đối tượng được truyền trong tham số đầu ti&ecirc;n v&agrave; chọn th&agrave;nh vi&ecirc;n <code>K</code>. Nếu ta truyền <code>id</code>, kiểu sẽ l&agrave; <code>number</code>, nếu ta truyền <code>title</code>, kiểu sẽ l&agrave; <code>string</code>.

Sử dụng keyof để xác thực tên thành viên