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ẽ thảo luận c&aacute;ch sử dụng mẫu branded alias (b&iacute; danh được gắn nh&atilde;n) để tạo c&aacute;c cấu tr&uacute;c kh&aacute;c nhau cho kiểu trong qu&aacute; tr&igrave;nh ph&aacute;t triển v&agrave; tại thời điểm chạy.
<h2 style="text-align: justify;">Hạn chế</h2>
TypeScript c&oacute; một ưu điểm l&agrave; n&oacute; tập trung v&agrave;o cấu tr&uacute;c của dữ liệu, tương tự như c&aacute;ch JavaScript hoạt động m&agrave; kh&ocirc;ng dựa v&agrave;o t&ecirc;n kiểu. Tuy nhi&ecirc;n, trong một số t&igrave;nh huống, đ&acirc;y c&oacute; thể l&agrave; một hạn chế. Một t&igrave;nh huống điển h&igrave;nh l&agrave; khi ta muốn biết kiểu của một đối tượng cụ thể để truy cập c&aacute;c trường thuộc t&iacute;nh hoặc so s&aacute;nh với một đối tượng kh&aacute;c.
<h2 style="text-align: justify;">Kiểu được gắn nh&atilde;n với trường duy nhất</h2>
Phương ph&aacute;p n&agrave;y tận dụng t&iacute;nh năng định kiểu dựa tr&ecirc;n cấu tr&uacute;c của TypeScript bằng c&aacute;ch sử dụng một trường duy nhất để đảm bảo hai kiểu kh&aacute;c nhau kh&ocirc;ng thể được coi l&agrave; giống nhau. Đoạn code sau kh&ocirc;ng bi&ecirc;n dịch th&agrave;nh c&ocirc;ng v&igrave; TypeScript nhận thấy rằng hai kiểu kh&ocirc;ng thể giống nhau.
<pre class="language-ts" data-content="interface%20BaseClass%20%7B%0A%C2%A0%C2%A0id%3A%20number%3B%0A%7D%0Ainterface%20Type1%20extends%20BaseClass%20%7B%0A%C2%A0%C2%A0_type1Brand%3A%20void%3B%0A%7D%0Ainterface%20Type2%20extends%20BaseClass%20%7B%0A%C2%A0%C2%A0_type2Brand%3A%20void%3B%0A%7D%0A%0Alet%20t1%3A%20Type1%20%3D%20%7B%20id%3A%201%20%7D%20as%20Type1%3B%0Alet%20t2%3A%20Type2%20%3D%20%7B%20id%3A%201%20%7D%20as%20Type2%3B%3B%0A%0Aif%20(t1%20%3D%3D%3D%20t2)%20%7B%0A%C2%A0%C2%A0console.log(%22Same%22)%3B%0A%7D%20else%20%7B%0A%C2%A0%C2%A0console.log(%22Different%22)%3B%0A%7D" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>interface BaseClass {
 id: number;
}
interface Type1 extends BaseClass {
 _type1Brand: void;
}
interface Type2 extends BaseClass {
 _type2Brand: void;
}

let t1: Type1 = { id: 1 } as Type1;
let t2: Type2 = { id: 1 } as Type2;;

if (t1 === t2) {
 console.log("Same");
} else {
 console.log("Different");
}</code></pre>
Đoạn code trả về lỗi <code>This condition will always return 'false' since the types 'Type1' and 'Type2' have no overlap.</code>
Trong trường hợp c&oacute; nhiều lớp con kế thừa từ một lớp cha, việc gắn nh&atilde;n bằng một trường duy nhất c&oacute; thể gi&uacute;p ph&acirc;n biệt c&aacute;c lớp con. Tuy nhi&ecirc;n, nhược điểm của kỹ thuật n&agrave;y l&agrave; n&oacute; y&ecirc;u cầu phải chuyển kiểu cho mỗi ph&eacute;p g&aacute;n, tuy nhi&ecirc;n n&oacute; kh&ocirc;ng ảnh hưởng đến hiệu suất thời gian chạy v&igrave; kh&ocirc;ng c&oacute; gi&aacute; trị thực tế được g&aacute;n.
<h2 style="text-align: justify;">Kiểu được gắn nh&atilde;n với kiểu hằng</h2>
Kiểu được gắn nh&atilde;n đề cập đến việc tạo ra sự kh&aacute;c biệt trong bản th&acirc;n cấu tr&uacute;c. Một c&aacute;ch tiếp cận l&agrave; g&aacute;n một t&ecirc;n chung cho nhiều kiểu v&agrave; tạo kiểu duy nhất li&ecirc;n quan đến t&ecirc;n chung. Kiểu duy nhất c&oacute; thể l&agrave; kiểu hằng để tr&aacute;nh việc tạo ra kiểu mới cho mỗi lần cần sử dụng.
<pre class="language-ts" data-content="interface%20TypeA%20%7B%0A%C2%A0%C2%A0kind%3A%20%22TYPEA%22%0A%C2%A0%C2%A0name%3A%20string%3B%0A%C2%A0%C2%A0id%3A%20number%3B%0A%7D%0Ainterface%20TypeB%20%7B%0A%C2%A0%C2%A0kind%3A%20%22TYPEB%22%0A%C2%A0%C2%A0error%3A%20boolean%3B%0A%7D%0Alet%20var1%3A%20TypeA%20%3D%20%7B%0A%C2%A0%C2%A0kind%3A%20%22TYPEA%22%2C%0A%C2%A0%C2%A0name%3A%20%22Variable1%22%2C%0A%C2%A0%C2%A0id%3A%201%0A%7D%3B%0Alet%20var2%3A%20TypeB%20%3D%20%7B%0A%C2%A0%C2%A0kind%3A%20%22TYPEB%22%2C%0A%C2%A0%C2%A0error%3A%20true%0A%7D%3B%0Aif%20(var1%20%3D%3D%3D%20var2)%20%7B%20%2F%2F%20Always%20will%20be%20false" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>interface TypeA {
 kind: "TYPEA"
 name: string;
 id: number;
}

interface TypeB {
 kind: "TYPEB"
 error: boolean;
}

let var1: TypeA = {
 kind: "TYPEA",
 name: "Variable1",
 id: 1
};

let var2: TypeB = {
 kind: "TYPEB",
 error: true
};

if (var1 === var2) { // Always will be false</code></pre>
V&iacute; dụ tr&ecirc;n sử dụng trường thuộc t&iacute;nh chung _kind cung cấp gi&aacute; trị duy nhất cho mỗi kiểu. Khi so s&aacute;nh trong h&agrave;m print, TypeScript biết rằng do c&oacute; kiểu hằng trong định nghĩa của interface, n&oacute; c&oacute; thể thu hẹp xuống kiểu ph&ugrave; hợp, cho ph&eacute;p ta nhận được gợi &yacute; Intellisense ch&iacute;nh x&aacute;c v&agrave; chương tr&igrave;nh bi&ecirc;n dịch th&agrave;nh c&ocirc;ng. Ngo&agrave;i ra, tương tự như&nbsp; _brand, nếu ta so s&aacute;nh hai đối tượng kh&ocirc;ng thể bằng nhau th&igrave; sẽ bị TypeScript ph&aacute;t hiện v&agrave; xử l&yacute; n&oacute;, tương tự như với mẫu _kind.
<h2 style="text-align: justify;">&Aacute;p dụng trong JavaScript</h2>
Hai mẫu trong b&agrave;i học n&agrave;y cũng c&oacute; thể được &aacute;p dụng trong JavaScript v&igrave; ch&uacute;ng đặt ra một y&ecirc;u cầu đối với thực thể của kiểu. Cụ thể, mỗi thực thể phải sở hữu một chuỗi được định nghĩa tr&ecirc;n một trường thuộc t&iacute;nh duy nhất hoặc c&oacute; một kiểu hằng được g&aacute;n cho n&oacute;. Trong cả hai trường hợp, c&aacute;c đối tượng JavaScript được tạo ra c&oacute; t&iacute;nh đặc th&ugrave; về cấu tr&uacute;c được duy tr&igrave; trong suốt qu&aacute; tr&igrave;nh thực thi.

Bí danh được gắn nhãn