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 c&aacute;ch biến đổi kiểu generic với một r&agrave;ng buộc để kiểm so&aacute;t dữ liệu được truyền v&agrave;o.
Khi sử dụng generic, bạn c&oacute; thể chỉ định rằng kiểu được truyền v&agrave;o lớp generic phải mở rộng một interface cụ thể. Generic cho ph&eacute;p viết code phụ thuộc v&agrave;o một interface tối thiểu m&agrave; kh&ocirc;ng phải chỉ định một lớp cụ thể.
V&iacute; dụ: với một danh s&aacute;ch, bạn kh&ocirc;ng cần buộc danh s&aacute;ch phải chứa một đối tượng cụ thể. Thay v&agrave;o đ&oacute;, bạn c&oacute; thể tạo một danh s&aacute;ch generic trong đ&oacute; kiểu generic được truyền v&agrave;o phải mở rộng một định nghĩa cụ thể.
<h2 style="text-align: justify;">H&agrave;m với r&agrave;ng buộc</h2>
Trong v&iacute; dụ sau đ&acirc;y, ch&uacute;ng ta đang khai b&aacute;o rằng bất kỳ đối tượng n&agrave;o c&oacute; &iacute;t nhất một th&agrave;nh vi&ecirc;n c&oacute; t&ecirc;n l&agrave; <code>id</code> v&agrave; kiểu <code>number</code> đều được chấp nhận. Bằng c&aacute;ch mở rộng kiểu generic, bạn c&oacute; thể triển khai logic tr&ecirc;n c&aacute;c th&agrave;nh vi&ecirc;n cụ thể; v&iacute; dụ: truy cập th&agrave;nh vi&ecirc;n <code>id</code> m&agrave; kh&ocirc;ng cần biết về c&aacute;c th&agrave;nh vi&ecirc;n kh&aacute;c trong đối tượng.
<pre class="language-ts" data-content="interface%20MyType%20%7B%20%2F%2F%20Type%20that%20has%20a%20single%20field%0A%C2%A0%C2%A0%C2%A0%C2%A0id%3A%20number%3B%0A%7D%0Ainterface%20AnotherType%20extends%20MyType%20%7B%7D%20%2F%2F%20Another%20type%20that%20has%20all%20the%20field%20from%20MyType%0Afunction%20genericFunction%3CT%20extends%20MyType%3E(p1%3A%20T)%20%7B%7D%20%2F%2F%20A%20function%20that%20take%20a%20generic%20type%20that%20must%20at%20least%20have%20the%20fields%20of%20MyType%0A%0Aconst%20arg%3A%20AnotherType%20%3D%20%7B%20id%3A%201%20%7D%3B%20%2F%2F%20Create%20an%20object%20that%20is%20not%20%22MyType%22%0AgenericFunction(arg)%3B%20%2F%2F%20This%20is%20legit%C2%A0%20because%20AnotherType%20extend%20MyType%2C%20thus%20has%20all%20the%20required%20fields%0A%0AgenericFunction(%7B%20id%3A%20123%20%7D)%3B%20%2F%2F%20This%20is%20legit%20as%20well%20since%20id%20is%20the%20only%20required%20field%20from%20MyType%0A%0A%2F%2F%20genericFunction(%22doesn't%20compile%22)%20%2F%2F%20Doest%20not%20compile%2C%20not%20legit." data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>interface MyType { // Type that has a single field
 id: number;
}
interface AnotherType extends MyType {} // Another type that has all the field from MyType
function genericFunction&lt;T extends MyType&gt;(p1: T) {} // A function that take a generic type that must at least have the fields of MyType

const arg: AnotherType = { id: 1 }; // Create an object that is not "MyType"
genericFunction(arg); // This is legit because AnotherType extend MyType, thus has all the required fields

genericFunction({ id: 123 }); // This is legit as well since id is the only required field from MyType

// genericFunction("doesn't compile") // Doest not compile, not legit.</code></pre>
D&ograve;ng 12 đ&atilde; được chuyển th&agrave;nh comment. Đối số được truyền v&agrave;o kh&ocirc;ng c&oacute; th&agrave;nh vi&ecirc;n <code>id</code>: n&oacute; l&agrave; một chuỗi. Do đ&oacute;, TypeScript nhận ra rằng kiểu của đối số n&agrave;y kh&ocirc;ng hợp lệ v&agrave; g&acirc;y ra lỗi trong qu&aacute; tr&igrave;nh bi&ecirc;n dịch. Ngược lại, tr&ecirc;n d&ograve;ng 8 v&agrave; d&ograve;ng 10, c&aacute;c đối tượng c&oacute; một <code>id</code>.
<h2 style="text-align: justify;">Truy cập c&aacute;c trường thuộc t&iacute;nh của kiểu generic</h2>
Kiểu generic gi&uacute;p tr&aacute;nh gặp lỗi khi chuyển đổi kiểu v&agrave; tr&aacute;nh việc truy cập v&agrave;o c&aacute;c th&agrave;nh vi&ecirc;n kh&ocirc;ng tồn tại. N&oacute; cũng cho ph&eacute;p truy cập v&agrave;o c&aacute;c th&agrave;nh vi&ecirc;n đ&atilde; được định nghĩa b&ecirc;n trong h&agrave;m generic.
<pre class="language-ts" data-content="interface%20MyType%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0id%3A%20number%3B%20%2F%2F%20id%20is%20available%0A%C2%A0%C2%A0%C2%A0%C2%A0id2%3A%20number%3B%0A%7D%0Ainterface%20AnotherType%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0id%3A%20number%3B%20%2F%2F%20id%20is%20available%0A%7D%0Afunction%20genericFunction%3CT%20extends%20AnotherType%3E(p1%3A%20T)%20%7B%C2%A0%20%2F%2F%20Any%20type%20that%20has%20all%20fields%20from%20AnotherType%0A%C2%A0%C2%A0%C2%A0%C2%A0console.log(%22Inside%20generic%3A%22%20%2B%20p1.id)%3B%0A%7D%0A%0AgenericFunction(%7B%20id%3A%20123%2C%20id2%3A%2099999%20%7D)%3B%20%2F%2F%20This%20is%20legit%20because%20we%20have%20id%20(and%20more)" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>interface MyType {
 id: number; // id is available
 id2: number;
}
interface AnotherType {
 id: number; // id is available
}
function genericFunction&lt;T extends AnotherType&gt;(p1: T) { // Any type that has all fields from AnotherType
 console.log("Inside generic:" + p1.id);
}

genericFunction({ id: 123, id2: 99999 }); // This is legit because we have id (and more)</code></pre>
Đoạn code tr&ecirc;n truyền một đối tượng c&oacute; hai th&agrave;nh vi&ecirc;n <code>id</code> v&agrave; <code>id2</code> v&agrave;o một h&agrave;m generic y&ecirc;u cầu một <code>id</code> kiểu <code>number</code>. Đối tượng được truyền ở d&ograve;ng 12 c&oacute; chứa cả <code>id</code> v&agrave; <code>id2</code>. Tuy nhi&ecirc;n, b&ecirc;n trong h&agrave;m generic, chỉ c&oacute; <code>id</code> c&oacute; thể truy cập được. L&yacute; do l&agrave; v&igrave; h&agrave;m n&agrave;y mong đợi kiểu <code>T</code> phải c&oacute; th&ocirc;ng tin chung tối thiểu sau từ kh&oacute;a <code>extends</code> v&agrave; bất cứ điều g&igrave; kh&aacute;c ngo&agrave;i những thứ được x&aacute;c định trong kiểu sau extends kh&ocirc;ng được đảm bảo, do đ&oacute; kh&ocirc;ng thể truy cập được.&nbsp;
Rất nhiều trường hợp sử dụng của generic sẽ sử dụng mẫu cho ph&eacute;p nhận một kiểu generic, nhưng chỉ quan t&acirc;m đến một v&agrave;i trường thuộc t&iacute;nh của kiểu đ&oacute;. V&iacute; dụ: tạo một thư viện ghi nhật k&yacute; cần nhận v&agrave;o một đối tượng c&oacute; 2 trường l&agrave; <code>errorCode</code> v&agrave; <code>errorDescription</code> v&agrave; đồng thời cho ph&eacute;p bất kỳ nhận kiểu n&agrave;o miễn l&agrave; ch&uacute;ng c&oacute; hai trường n&agrave;y.

Ràng buộc kiểu Generic