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ẽ thảo luận về tuple v&agrave; c&aacute;ch TypeScript ph&acirc;n biệt tuple với mảng.
<h2 style="text-align: justify;">C&uacute; ph&aacute;p tuple</h2>
Kiểu tuple l&agrave; một mảng chứa c&aacute;c phần tử đ&atilde; được định nghĩa. Để khai b&aacute;o tuple, bạn sử dụng dấu ngoặc vu&ocirc;ng như được thể hiện ở d&ograve;ng 1, tuy nhi&ecirc;n thay v&igrave; chỉ định gi&aacute; trị, bạn chỉ định kiểu.
<pre class="language-ts" data-content="let%20numberTuple%3A%20%5Bnumber%2C%20number%2C%20number%5D%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>let numberTuple: [number, number, number];</code></pre>
Một tuple c&oacute; thể xử l&yacute; nhiều kiểu dữ liệu kh&aacute;c nhau. C&uacute; ph&aacute;p khai b&aacute;o kiểu của tuple tương tự như c&uacute; ph&aacute;p khai b&aacute;o c&aacute;c kiểu dữ liệu kh&aacute;c.
<pre class="language-ts" data-content="let%20myTupleWithTwoTypes%3A%20%5Bnumber%2C%20string%5D%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>let myTupleWithTwoTypes: [number, string];</code></pre>
Bạn c&oacute; thể khai b&aacute;o v&agrave; g&aacute;n gi&aacute; trị cho biến trong c&ugrave;ng một bước. TypeScript sẽ kiểm tra kiểu trong qu&aacute; tr&igrave;nh g&aacute;n.
<pre class="language-ts" data-content="let%20myTuple%3A%20%5Bnumber%2C%20string%5D%20%3D%20%5B0%2C%20%221%22%5D%3B%0AmyTuple%20%3D%20%5B1%2C%20%22test%22%5D%3B%0Aconst%20numberVariable%3A%20number%20%3D%20myTuple%5B0%5D%3B%0Aconst%20stringVariable%3A%20string%20%3D%20myTuple%5B1%5D%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>let myTuple: [number, string] = [0, "1"];
myTuple = [1, "test"];
const numberVariable: number = myTuple[0];
const stringVariable: string = myTuple[1];</code></pre>
<h2 style="text-align: justify;">Chuyển đổi m&atilde; nguồn</h2>
Tuple được chuyển đổi th&agrave;nh mảng khi m&atilde; nguồn được chuyển đổi sang JavaScript. Điều n&agrave;y c&oacute; nghĩa l&agrave; TypeScript cho ph&eacute;p bạn g&aacute;n gi&aacute; trị vượt ngo&agrave;i c&aacute;c gi&aacute; trị thuộc kiểu được chỉ định trong dấu ngoặc vu&ocirc;ng cho tuple nếu biến được định nghĩa nằm ngo&agrave;i phạm vi của bất kỳ kiểu n&agrave;o được định nghĩa trong tuple. V&iacute; dụ: bạn định nghĩa một tuple bao gồm một số v&agrave; chuỗi, sau đ&oacute; bạn c&oacute; thể định nghĩa biến thứ ba l&agrave; một chuỗi hoặc số nhưng n&oacute; kh&ocirc;ng thể l&agrave; boolean hoặc đối tượng.
<pre class="language-ts" data-content="let%20myTuple%3A%20%5Bnumber%2C%20string%5D%3B%0AmyTuple%20%3D%20%5B1%2C%20%22test%22%5D%3B%0AmyTuple%5B3%5D%20%3D%20%22one%20more%22%3B%20%2F%2F%20Won't%20compile%20TS%20%3E%3D%202.7%0AmyTuple%5B4%5D%20%3D%202%3B%20%2F%2F%20Won't%20compile%20TS%20%3E%3D%202.7%0AmyTuple%5B5%5D%20%3D%20true%3B%20%2F%2F%20Won't%20compile%20(number%7Cstring%20only)" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>let myTuple: [number, string];
myTuple = [1, "test"];
myTuple[3] = "one more"; // Won't compile TS &gt;= 2.7
myTuple[4] = 2; // Won't compile TS &gt;= 2.7
myTuple[5] = true; // Won't compile (number|string only)</code></pre>
<h2 style="text-align: justify;">X&aacute;c nhận độ d&agrave;i của tuple</h2>
Kể tử phi&ecirc;n bản 2.7, TypeScript đ&atilde; l&agrave;m cho trường thuộc t&iacute;nh length của tuple trở th&agrave;nh cố định. Đặc điểm n&agrave;y đảm bảo rằng c&aacute;c tuple c&oacute; c&ugrave;ng độ d&agrave;i v&agrave; c&ugrave;ng kiểu ở c&aacute;c vị tr&iacute; tương ứng, từ đ&oacute; cho ph&eacute;p g&aacute;n gi&aacute; trị giữa c&aacute;c tuple.
<pre class="language-ts" data-content="let%20firstTuple%3A%20%5Bnumber%2C%20number%5D%20%3D%20%5B1%2C%202%5D%3B%0Alet%20secondTuple%3A%20%5Bnumber%2C%20number%2C%20number%5D%20%3D%20%5B3%2C%204%2C%205%5D%3B%0AsecondTuple%20%3D%20firstTuple%3B%20%2F%2F%20Doesn't%20compile%20type%20mismatch%0AfirstTuple%20%3D%20secondTuple%3B%20%2F%2F%20Doesn't%20compile%20length%20incompatible" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>let firstTuple: [number, number] = [1, 2];
let secondTuple: [number, number, number] = [3, 4, 5];
secondTuple = firstTuple; // Doesn't compile type mismatch
firstTuple = secondTuple; // Doesn't compile length incompatible</code></pre>
<h2 style="text-align: justify;">Tuple chỉ đọc</h2>
Trong b&agrave;i học về mảng, ta đ&atilde; học rằng ta c&oacute; thể đ&aacute;nh dấu một danh s&aacute;ch l&agrave; chỉ đọc. Tương tự, ta cũng c&oacute; thể sử dụng từ kh&oacute;a <code>readonly</code> để khai b&aacute;o một tuple chỉ đọc. Tuy nhi&ecirc;n, từ kh&oacute;a n&agrave;y kh&ocirc;ng thể được sử dụng với \generic, chẳng hạn như kiểu <code>Array&lt;T&gt;</code>.
<pre class="language-ts" data-content="let%20firstTuple%3A%20%5Bnumber%2C%20number%5D%20%3D%20%5B1%2C%202%5D%3B%0Alet%20secondTuple%3A%20readonly%20%5Bnumber%2C%20number%2C%5D%20%3D%20%5B3%2C%204%5D%3B%0A%0AfirstTuple%5B0%5D%20%3D%20100%3B%0A%2F%2F%20secondTuple%5B0%5D%20%3D%201000%3B%20%2F%2FError!%20Read-only%20Tuple%0A%0Aconsole.log(firstTuple)%3B%0Aconsole.log(secondTuple)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>let firstTuple: [number, number] = [1, 2];
let secondTuple: readonly [number, number,] = [3, 4];

firstTuple[0] = 100;
// secondTuple[0] = 1000; //Error! Read-only Tuple

console.log(firstTuple);
console.log(secondTuple);</code></pre>
Mặc d&ugrave; kh&ocirc;ng c&oacute; kiểu <code>ReadonlyTuple&lt;T&gt;</code>, ta vẫn c&oacute; thể sử dụng <code>Readonly&lt;T&gt;</code> tr&ecirc;n một tập hợp được định kiểu. Đoạn code sau kh&ocirc;ng bi&ecirc;n dịch v&igrave; tuple l&agrave; chỉ đọc.
<pre class="language-ts" data-content="let%20firstTuple%3A%20Readonly%3C%5Bnumber%2C%20number%5D%3E%20%3D%20%5B1%2C%202%5D%3B%0AfirstTuple%5B0%5D%20%3D%20100%3B%0A%0Aconsole.log(firstTuple)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>let firstTuple: Readonly&lt;[number, number]&gt; = [1, 2];
firstTuple[0] = 100;

console.log(firstTuple);</code></pre>
Cuối c&ugrave;ng, tuple chỉ đọc c&oacute; thể được tạo bằng c&aacute;ch sử dụng từ kh&oacute;a <code>as const</code>. T&ecirc;n từ kh&oacute;a c&oacute; thể g&acirc;y nhầm lẫn v&igrave; mặc d&ugrave; sử dụng từ kh&oacute;a constant, nhưng thực tế n&oacute; sẽ chuyển đổi biến th&agrave;nh tuple chỉ đọc với kiểu dữ liệu cụ thể. Bạn c&oacute; thể uncomment c&aacute;c d&ograve;ng từ 5 đến 7 để xem lỗi bi&ecirc;n dịch.
<pre class="language-ts" data-content="let%20firstTuple%3A%20readonly%20%5Bnumber%2C%20number%5D%20%3D%20%5B1%2C%202%5D%3B%0Alet%20secondTuple%3A%20Readonly%3C%5Bnumber%2C%20number%5D%3E%20%3D%20%5B1%2C%202%5D%3B%0Alet%20thirdTuple%20%3D%20%5B1%2C%202%5D%20as%20const%3B%0A%0A%2F%2F%20firstTuple%5B0%5D%20%3D%200%3B%0A%2F%2F%20secondTuple%5B0%5D%20%3D%200%3B%0A%2F%2F%20thirdTuple%5B0%5D%20%3D%200%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>let firstTuple: readonly [number, number] = [1, 2];
let secondTuple: Readonly&lt;[number, number]&gt; = [1, 2];
let thirdTuple = [1, 2] as const;

// firstTuple[0] = 0;
// secondTuple[0] = 0;
// thirdTuple[0] = 0;</code></pre>
Trong b&agrave;i học n&agrave;y, ch&uacute;ng ta đ&atilde; t&igrave;m hiểu định nghĩa tuple v&agrave; ph&acirc;n biệt n&oacute; với mảng. Ngo&agrave;i ra, ch&uacute;ng ta cũng b&agrave;n luận c&aacute;ch sửa đổi dữ liệu chỉ đọc, cho ph&eacute;p thiết lập th&ecirc;m nhiều hạn chế cho dữ liệu được lưu trữ trong tuple.

Tuple và Độ dài cố định