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ẽ x&acirc;y dựng kiến thức nền tảng cho c&aacute;c b&agrave;i học sắp tới về kiểu dẫn xuất.
<h2 style="text-align: justify;">Kiểu dẫn xuất l&agrave; g&igrave;?</h2>
Kiểu dẫn xuất (mapped type) cho ph&eacute;p tạo một kiểu dữ liệu mới từ kiểu hiện c&oacute;. Thuật ngữ map (&aacute;nh xạ) c&oacute; nghĩa l&agrave; trỏ c&aacute;c th&agrave;nh vi&ecirc;n hiện c&oacute; của một kiểu tới một kiểu mới th&ocirc;ng qua một logic t&ugrave;y chỉnh d&agrave;nh ri&ecirc;ng cho triển khai của đối tượng &aacute;nh xạ.
Một v&iacute; dụ điển h&igrave;nh l&agrave; tạo một interface lưu trữ tất cả c&aacute;c th&agrave;nh vi&ecirc;n c&ugrave;ng t&ecirc;n, nhưng c&aacute;c th&agrave;nh vi&ecirc;n l&agrave; t&ugrave;y chọn hoặc chỉ đọc.
<h2 style="text-align: justify;">Ưu điểm của kiểu dẫn xuất</h2>
<h3 style="text-align: justify;">Ưu điểm thứ nhất</h3>
Kiểu dẫn xuất mang đến hai ưu điểm so với c&aacute;c phi&ecirc;n bản TypeScript trước đ&oacute; kh&ocirc;ng hỗ trợ kiểu n&agrave;y.
Trước khi c&oacute; kiểu dẫn xuất, ch&uacute;ng ta cần tạo một interface bổ sung để phản &aacute;nh trạng th&aacute;i cuối c&ugrave;ng m&agrave; bạn muốn đạt được. Bước bổ sung n&agrave;y l&agrave;m tăng mức độ phức tạp của m&atilde; nguồn, phụ thuộc v&agrave;o c&aacute;ch biến đổi interface v&agrave; số lượng biến thể của interface cần được &aacute;nh xạ.
Hơn nữa, đối với mỗi interface gốc, bạn cần đồng bộ h&oacute;a mọi interface kh&aacute;c mỗi khi interface gốc thay đổi. Điều n&agrave;y khiến c&ocirc;ng việc bảo tr&igrave; trở n&ecirc;n kh&oacute; khăn hơn.
Trước khi kiểu dẫn xuất được giới thiệu, ch&uacute;ng ta cần sử dụng hai interface: một interface chỉ đọc v&agrave; một interface kh&ocirc;ng sử dụng kiểu dẫn xuất, như được thể hiện trong đoạn code dưới đ&acirc;y. Đoạn code tạo ra hai đối tượng với c&aacute;c thuộc t&iacute;nh giống nhau, một đối tượng c&oacute; thể thay đổi c&aacute;c gi&aacute; trị sau khi khởi tạo v&agrave; một đối tượng ngăn chặn việc g&aacute;n lại gi&aacute; trị trong tương lai.
<pre class="language-ts" data-content="interface%20OriginalInterface%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0x%3A%20number%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0y%3A%20string%3B%0A%7D%0A%0Ainterface%20ReadOnlyOriginalInterface%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0readonly%20x%3A%20number%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0readonly%20y%3A%20string%3B%0A%7D%0A%0Alet%20variable1%3A%20OriginalInterface%20%3D%20%7B%20x%3A%201%2C%20y%3A%20%222%22%20%7D%3B%0Alet%20variable2%3A%20ReadOnlyOriginalInterface%20%3D%20%7B%20x%3A%201%2C%20y%3A%20%222%22%20%7D%3B%0Avariable1.x%20%3D%202%3B%20%2F%2F%20Can%20alter%20the%20value%0A%2F%2F%20variable2.x%20%3D%202%3B%20%2F%2F%20Cannot%20alter%20the%20value" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>interface OriginalInterface {
 x: number;
 y: string;
}

interface ReadOnlyOriginalInterface {
 readonly x: number;
 readonly y: string;
}

let variable1: OriginalInterface = { x: 1, y: "2" };
let variable2: ReadOnlyOriginalInterface = { x: 1, y: "2" };
variable1.x = 2; // Can alter the value
// variable2.x = 2; // Cannot alter the value</code></pre>
<h3 style="text-align: justify;">Ưu điểm thứ hai</h3>
Ưu điểm thứ hai l&agrave; nếu kh&ocirc;ng c&oacute; kiểu dẫn xuất, bạn cần tạo một h&agrave;m mới cho mỗi interface để thực hiện việc biến đổi. Điều n&agrave;y cũng l&agrave;m cho m&atilde; nguồn trở n&ecirc;n kh&oacute; kiểm so&aacute;t. Với kiểu dẫn xuất, bạn chỉ cần tạo một h&agrave;m biến đổi v&agrave; định nghĩa kiểu dẫn xuất tương ứng. Với sự trợ gi&uacute;p của kiểu generic, ta chỉ cần sử dụng duy nhất h&agrave;m biến đổi, h&agrave;m n&agrave;y nhận một generic interface v&agrave; trả về định nghĩa kiểu dẫn xuất tương ứng, trong đ&oacute; cũng sử dụng kiểu generic.
Ch&uacute;ng ta sẽ t&igrave;m hiểu chi tiết hơn về kiểu generic trong c&aacute;c b&agrave;i học sắp tới. Hiện tại, ch&uacute;ng ta sẽ đơn giản h&oacute;a kh&aacute;i niệm generic bằng c&aacute;ch t&aacute;i sử dụng code để thay đổi kiểu của interface. Đoạn code dưới đ&acirc;y minh họa một <code>function</code> đơn giản chuyển đổi một interface th&agrave;nh kiểu kh&aacute;c.
<pre class="language-ts" data-content="%2F%2F%20The%20interface%20that%20define%20a%20structure%20that%20allows%20re-assignment%20of%20values%0Ainterface%20OriginalInterface%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0x%3A%20number%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0y%3A%20string%3B%0A%7D%0A%0A%2F%2F%20The%20interface%20that%20defines%20a%20structure%20that%20allows%20assignment%20only%20at%20creating%0Ainterface%20ReadOnlyOriginalInterface%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0readonly%20x%3A%20number%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0readonly%20y%3A%20string%3B%0A%7D%0A%0Alet%20variable1%3A%20OriginalInterface%20%3D%20%7B%20x%3A%201%2C%20y%3A%20%222%22%20%7D%3B%0Alet%20variable2%3A%20ReadOnlyOriginalInterface%20%3D%20%7B%20x%3A%201%2C%20y%3A%20%222%22%20%7D%3B%0A%0A%2F%2F%20A%20function%20that%20transform%20one%20object%20to%20the%20other%20type%0Afunction%20mapOriginalInterfaceToBeReadOnly(o%3A%20OriginalInterface)%3A%20ReadOnlyOriginalInterface%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20o%3B%0A%7D%0A%0Alet%20variable3%20%3D%20mapOriginalInterfaceToBeReadOnly(variable1)%3B%0A%2F%2F%20variable3.x%20%3D%202%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>// The interface that define a structure that allows re-assignment of values
interface OriginalInterface {
 x: number;
 y: string;
}

// The interface that defines a structure that allows assignment only at creating
interface ReadOnlyOriginalInterface {
 readonly x: number;
 readonly y: string;
}

let variable1: OriginalInterface = { x: 1, y: "2" };
let variable2: ReadOnlyOriginalInterface = { x: 1, y: "2" };

// A function that transform one object to the other type
function mapOriginalInterfaceToBeReadOnly(o: OriginalInterface): ReadOnlyOriginalInterface {
 return o;
}

let variable3 = mapOriginalInterfaceToBeReadOnly(variable1);
// variable3.x = 2;</code></pre>
Trong b&agrave;i học tiếp theo, ch&uacute;ng ta sẽ t&igrave;m hiểu một t&igrave;nh huống thực tế trong đ&oacute;, thay v&igrave; tạo một h&agrave;m cho mỗi kiểu dữ liệu được chuyển đổi, ta sẽ sử dụng kiểu dẫn xuất. Code trong b&agrave;i học n&agrave;y kh&ocirc;ng sử dụng kiểu dẫn xuất v&agrave; để chuyển đổi một một đối tượng sang interface kh&aacute;c, ta phải tạo một bản sao của interface gốc v&agrave; th&ecirc;m <code>readonly</code> v&agrave;o từng trường, sau đ&oacute; tạo một h&agrave;m để thực hiện chuyển đổi.

Định nghĩa và cách sử dụng