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

Trong b&agrave;i học n&agrave;y, ch&uacute;ng ta sẽ t&igrave;m hiểu c&aacute;ch định nghĩa một gi&aacute; trị hằng bằng c&aacute;ch sử dụng từ kh&oacute;a "as const".
Từ phi&ecirc;n bản TypeScript 3.4, ch&uacute;ng ta c&oacute; th&ecirc;m t&ugrave;y chọn định nghĩa c&aacute;c hằng bằng từ kh&oacute;a <code>as const</code>. As const được sử dụng để tạo một biến c&oacute; gi&aacute; trị kh&ocirc;ng đổi.
<h2 style="text-align: justify;">const với as const</h2>
Ban đầu, <code>as const</code> tr&ocirc;ng c&oacute; vẻ dư thừa v&igrave; ta vốn c&oacute; thể khai b&aacute;o biến với <code>const</code> v&agrave; l&agrave;m cho gi&aacute; trị kh&ocirc;ng thể thay đổi (d&ograve;ng 1).
Tuy nhi&ecirc;n, <code>const</code> v&agrave; <code>as const</code> l&agrave; hai kh&aacute;i niệm kh&aacute;c nhau. Với <code>as const</code> (d&ograve;ng 3), khai b&aacute;o được thực hiện bằng <code>let</code>, cho ph&eacute;p gi&aacute; trị c&oacute; thể thay đổi. Tuy nhi&ecirc;n, sự thay đổi n&agrave;y chỉ được &aacute;p dụng cho kiểu hằng. Dưới đ&acirc;y l&agrave; một v&iacute; dụ:
<pre class="language-ts" data-content="const%20v1%20%3D%2010%3B%0A%2F%2F%20v1%20%3D%2010%3B%20%2F%2F%20Does%20not%20compile%0Alet%20v2%20%3D%2010%20as%20const%3B%0Av2%20%3D%2010%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>const v1 = 10;
// v1 = 10; // Does not compile
let v2 = 10 as const;
v2 = 10;</code></pre>
<h2 style="text-align: justify;">Khai b&aacute;o mảng l&agrave; const</h2>
Mảng chỉ đọc c&oacute; thể hữu &iacute;ch trong một số trường hợp. Mảng được khai b&aacute;o bằng <code>const</code> kh&ocirc;ng thể được g&aacute;n lại, tuy nhi&ecirc;n bạn vẫn c&oacute; thể thay đổi c&aacute;c gi&aacute; trị b&ecirc;n trong n&oacute;.
<pre class="language-ts" data-content="%2F%2F%20Const%0Aconst%20myArr1%20%3D%20%5B1%2C%202%2C%203%5D%3B%0AmyArr1.push(4)%3B%0Aconsole.log(myArr1)%3B%0A%0A%2F%2F%20myArr1%20%3D%20%5B%5D%3B%20%2F%2F%20Doest%20not%20compile%20because%20const" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>// Const
const myArr1 = [1, 2, 3];
myArr1.push(4);
console.log(myArr1);

// myArr1 = []; // Doest not compile because const</code></pre>
Ngược lại, một mảng được khai b&aacute;o bằng <code>as const</code> sẽ chứa c&aacute;c gi&aacute; trị kh&ocirc;ng thể thay đổi. Khai b&aacute;o bằng <code>let</code> v&agrave; sử dụng khẳng định <code>const</code> kh&ocirc;ng cho ph&eacute;p bạn <code>push</code> hoặc thay đổi c&aacute;c phần tử trong mảng. Bạn c&oacute; thể thử bằng c&aacute;ch uncomment d&ograve;ng 2. TypeScript sẽ kh&ocirc;ng cho ph&eacute;p m&atilde; nguồn được chuyển đổi sang JavaScript. Intellisense cũng kh&ocirc;ng cung cấp gợi &yacute; cho việc thay đổi gi&aacute; trị v&agrave; kh&ocirc;ng thể bi&ecirc;n dịch code được viết để thay đổi gi&aacute; trị.
<pre class="language-ts" data-content="let%20myArr2%20%3D%20%5B1%2C%202%2C%203%5D%20as%20const%3B%0A%2F%2F%20myArr2.push(4)%3B%20%2F%2F%20Does%20not%20provide%20the%20auto-complete%2C%20neither%20compile." data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>let myArr2 = [1, 2, 3] as const;
// myArr2.push(4); // Does not provide the auto-complete, neither compile.</code></pre>
Mảng <code>myArr2</code> trong v&iacute; dụ tr&ecirc;n c&oacute; kiểu <code>readonly [1, 2, 3]</code>. Bạn c&oacute; thể viết lại v&iacute; dụ tr&ecirc;n theo c&uacute; ph&aacute;p phức tạp hơn như được thể hiện trong d&ograve;ng 1 của v&iacute; dụ dưới đ&acirc;y:
<pre class="language-ts" data-content="let%20myArr3%3A%20readonly%20%5B1%2C%202%2C%203%5D%20%3D%20%5B1%2C%202%2C%203%5D%3B%0A%2F%2F%20Or%3A%0Alet%20myArr4%3A%20readonly%20%5B1%2C%202%2C%203%5D%3B%0AmyArr4%20%3D%20%5B1%2C%202%2C%203%5D%3B%0A%2F%2F%20But%20not%3A%0A%2F%2F%20myArr4%20%3D%20%5B1%2C%202%5D%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>let myArr3: readonly [1, 2, 3] = [1, 2, 3];
// Or:
let myArr4: readonly [1, 2, 3];
myArr4 = [1, 2, 3];
// But not:
// myArr4 = [1, 2];</code></pre>
Lưu &yacute; rằng tất cả c&aacute;c gi&aacute; trị c&oacute; thể được thiết lập trong qu&aacute; tr&igrave;nh khai b&aacute;o hoặc sau khai b&aacute;o, tuy nhi&ecirc;n, bạn phải cung cấp đầy đủ c&aacute;c gi&aacute; trị v&igrave; kiểu của biến, sau khi được khai b&aacute;o l&agrave; chỉ đọc, sẽ l&agrave; một định nghĩa đầy đủ v&agrave; ho&agrave;n chỉnh của mảng. V&iacute; dụ, đoạn code trước đ&oacute; kh&ocirc;ng cho ph&eacute;p chỉ định mỗi <code>[1, 2]</code> như d&ograve;ng 6 v&igrave; khai b&aacute;o đ&atilde; chỉ định c&aacute;c gi&aacute; trị l&agrave; <code>[1, 2, 3]</code>.
<h2 style="text-align: justify;">Khai b&aacute;o đối tượng bằng as const</h2>
Tương tự như mảng, ta c&oacute; thể sử dụng <code>as const</code> để tạo một đối tượng bất biến. Thay đổi kiểu của đối tượng hoặc th&ecirc;m th&agrave;nh vi&ecirc;n mới bằng chữ k&yacute; chỉ số đều dẫn đến lỗi bi&ecirc;n dịch.
<pre class="language-ts" data-content="let%20immutable1%20%3D%20%7B%20id%3A%20%221%22%20%7D%20as%20const%3B%0A%2F%2F%20immutable1.id%20%3D%202%3B%20%2F%2F%20Does%20not%20compile%0A%2F%2F%20immutable1%5B%22newprop%22%5D%20%3D%202%3B%20%2F%2F%20Does%20not%20compile%0Aconsole.log(immutable1)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>let immutable1 = { id: "1" } as const;
// immutable1.id = 2; // Does not compile
// immutable1["newprop"] = 2; // Does not compile
console.log(immutable1);</code></pre>
Tương tự như mảng, TypeScript chuyển đổi c&aacute;c trường thuộc t&iacute;nh của đối tượng th&agrave;nh <code>readonly</code>.
<pre class="language-ts" data-content="let%20immutable2%3A%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0readonly%20id%3A%20number%0A%7D%20%3D%20%7B%20id%3A%201%20%7D%3B%0Aconsole.log(immutable2)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>let immutable2: {
 readonly id: number
} = { id: 1 };
console.log(immutable2);</code></pre>
C&aacute;c đối tượng lồng nhau sẽ được tự động đặt th&agrave;nh <code>readonly</code> ở mọi cấp độ, điều n&agrave;y l&agrave;m cho TypeScript v&agrave; <code>as const</code> trở th&agrave;nh một c&aacute;ch nhanh ch&oacute;ng để đảm bảo dữ liệu bất biến tại thời điểm thiết kế m&agrave; kh&ocirc;ng cần xử l&yacute; cấu tr&uacute;c dữ liệu đệ quy v&agrave; phức tạp.
<pre class="language-ts" data-content="let%20person%20%3D%20%7B%0A%C2%A0%C2%A0id%3A%201%2C%0A%C2%A0%C2%A0name%3A%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0first%3A%20%22Patrick%22%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0last%3A%20%22Desjardins%22%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0middleName%3A%20null%0A%C2%A0%C2%A0%7D%2C%0A%C2%A0%C2%A0location%3A%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0country%3A%20%22USA%22%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0state%3A%20%22CA%22%0A%C2%A0%C2%A0%7D%2C%0A%C2%A0%C2%A0relatives%3A%20%5B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0id%3A%202%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0name%3A%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0first%3A%20%22Person2%22%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0last%3A%20%22Person22%22%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0middle%3A%20%22Mid%22%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%C2%A0%C2%A0%5D%0A%7D%20as%20const%3B%0A%0A%2F%2F%20Doest%20not%20compile%3A%0A%2F%2F%20person.relatives.push(%7B%20id%3A%202%2C%20name%3A%20%7B%20first%3A%20%22New%22%2C%20last%3A%20%22New%22%2C%20middle%3A%20%22%22%20%7D%20%7D)%3B%0A%2F%2F%20person.id%20%3D%204%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>let person = {
 id: 1,
 name: {
 first: "Patrick",
 last: "Desjardins",
 middleName: null
 },
 location: {
 country: "USA",
 state: "CA"
 },
 relatives: [
 {
 id: 2,
 name: {
 first: "Person2",
 last: "Person22",
 middle: "Mid"
 }
 }
 ]
} as const;

// Doest not compile:
// person.relatives.push({ id: 2, name: { first: "New", last: "New", middle: "" } });
// person.id = 4;</code></pre>
Bạn cũng c&oacute; thể triển khai cụ thể hơn v&agrave; sử dụng <code>as const</code> cho một số th&agrave;nh vi&ecirc;n của đối tượng. V&iacute; dụ: chỉ định <code>location</code> l&agrave; dữ liệu kh&ocirc;ng thể thay đổi.
<pre class="language-ts" data-content="let%20person%20%3D%20%7B%0A%C2%A0%C2%A0id%3A%201%2C%0A%C2%A0%C2%A0name%3A%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0first%3A%20%22Patrick%22%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0last%3A%20%22Desjardins%22%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0middleName%3A%20null%0A%C2%A0%C2%A0%7D%2C%0A%C2%A0%C2%A0location%3A%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0country%3A%20%22USA%22%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0state%3A%20%22CA%22%0A%C2%A0%C2%A0%7D%20as%20const%2C%0A%C2%A0%C2%A0relatives%3A%20%5B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0id%3A%202%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0name%3A%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0first%3A%20%22Person2%22%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0last%3A%20%22Person22%22%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0middle%3A%20%22Mid%22%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%C2%A0%C2%A0%5D%0A%7D%3B%0A%0Aperson.relatives.push(%7B%20id%3A%202%2C%20name%3A%20%7B%20first%3A%20%22New%22%2C%20last%3A%20%22New%22%2C%20middle%3A%20%22%22%20%7D%20%7D)%3B%0Aperson.id%20%3D%204%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>let person = {
 id: 1,
 name: {
 first: "Patrick",
 last: "Desjardins",
 middleName: null
 },
 location: {
 country: "USA",
 state: "CA"
 } as const,
 relatives: [
 {
 id: 2,
 name: {
 first: "Person2",
 last: "Person22",
 middle: "Mid"
 }
 }
 ]
};

person.relatives.push({ id: 2, name: { first: "New", last: "New", middle: "" } });
person.id = 4;</code></pre>

Sử dụng as const để định nghĩa giá trị hằng