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 sử dụng kh&oacute;a với hằng số v&agrave; k&yacute; hiệu.
<h2 style="text-align: justify;">Hằng số</h2>
Phi&ecirc;n bản 2.7 hỗ trợ khả năng truy cập trường thuộc t&iacute;nh bằng c&aacute;ch sử dụng hằng số v&agrave; k&yacute; hiệu. Đ&acirc;y l&agrave; một cải tiến nhỏ v&igrave; trước phi&ecirc;n bản 2.7, ta c&oacute; thể truy cập (đọc v&agrave; viết) một hằng số hoặc k&yacute; hiệu, nhưng kh&ocirc;ng thể định nghĩa một trường trong interface hoặc kiểu.
<pre class="language-ts" data-content="const%20Foo%20%3D%20%22Foo%22%3B%20%2F%2F%20Constant%20value%0Aconst%20Bar%20%3D%20%22Bar%22%3B%20%2F%2F%20Constant%20value%0Aconst%20Zaz%20%3D%20%22Zaz%22%3B%20%2F%2F%20Constant%20value%0A%0Aconst%20objectWithConstantProperties%20%3D%20%7B%20%5BFoo%5D%3A%20100%2C%20%5BBar%5D%3A%20%22hello%22%2C%20%5BZaz%5D%3A%20()%20%3D%3E%20%7B%7D%20%7D%3B%0A%0Alet%20a12%3A%20number%20%3D%20objectWithConstantProperties%5BFoo%5D%3B%0Alet%20b2334%3A%20string%20%3D%20objectWithConstantProperties%5BBar%5D%3B%0A%0Aconsole.log(a12)%3B%0Aconsole.log(b2334)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>const Foo = "Foo"; // Constant value
const Bar = "Bar"; // Constant value
const Zaz = "Zaz"; // Constant value

const objectWithConstantProperties = { [Foo]: 100, [Bar]: "hello", [Zaz]: () =&gt; {} };

let a12: number = objectWithConstantProperties[Foo];
let b2334: string = objectWithConstantProperties[Bar];

console.log(a12);
console.log(b2334);</code></pre>
V&iacute; dụ tr&ecirc;n định nghĩa ba hằng số ở c&aacute;c d&ograve;ng 1, 2 v&agrave; 3. Tr&ecirc;n d&ograve;ng 5, c&aacute;c hằng số được sử dụng trong phần định danh (nằm giữa dấu ngoặc vu&ocirc;ng) để g&aacute;n gi&aacute; trị. Tr&ecirc;n d&ograve;ng 7-8, hằng số lại được sử dụng để truy cập c&aacute;c gi&aacute; trị.
&Yacute; tưởng đằng sau việc sử dụng hằng số l&agrave; tr&aacute;nh viết sai chuỗi.
<pre class="language-ts" data-content="const%20objNoConst%3A%20%7B%20%5Bid%3A%20string%5D%3A%20number%20%7D%20%3D%20%7B%20%5B%22key1%22%5D%3A%201%20%7D%3B%0A%0AobjNoConst%5B%22key2%22%5D%20%3D%202%3B%0A%0Aconsole.log(objNoConst%5B%22key1%22%5D)%3B%0Aconsole.log(objNoConst%5B%22key2%22%5D)%3B%0Aconsole.log(objNoConst%5B%22key11%22%5D)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>const objNoConst: { [id: string]: number } = { ["key1"]: 1 };

objNoConst["key2"] = 2;

console.log(objNoConst["key1"]);
console.log(objNoConst["key2"]);
console.log(objNoConst["key11"]);</code></pre>
V&iacute; dụ tr&ecirc;n d&ograve;ng 7 cho thấy t&iacute;nh linh hoạt của k&yacute; hiệu chỉ số c&oacute; thể được dễ d&agrave;ng x&aacute;c thực tại thời điểm ph&aacute;t triển, nhưng n&oacute; c&oacute; thể dẫn đến kết quả kh&ocirc;ng ch&iacute;nh x&aacute;c tại thời điểm thực thi. Vấn đề l&agrave; kh&ocirc;ng c&oacute; kh&oacute;a n&agrave;o được x&aacute;c định cho định danh <code>key11</code>. Đ&acirc;y c&oacute; thể l&agrave; một lỗi đ&aacute;nh m&aacute;y. Do đ&oacute;, sử dụng hằng số l&agrave;m kh&oacute;a c&oacute; thể gi&uacute;p tr&aacute;nh việc nhập sai t&ecirc;n.
<h2 style="text-align: justify;">K&yacute; hiệu</h2>
C&uacute; ph&aacute;p giống như khi bạn truy cập trường để sử dụng hằng số hoặc k&yacute; hiệu: sử dụng dấu ngoặc vu&ocirc;ng.
<pre class="language-ts" data-content="const%20SERIALIZE_1%20%3D%20Symbol(%22serialize-method-key%22)%3B%20%2F%2F%20Symbol%0Aconst%20SERIALIZE_2%20%3D%20%22serialize-method-key%22%3B%20%2F%2F%20Constant%0A%0Aconst%20o1%20%3D%20%7B%20%5BSERIALIZE_1%5D%3A%20%221%22%2C%20%5BSERIALIZE_2%5D%3A%20%222%22%20%7D%3B%0A%0Alet%20s1%3A%20string%20%3D%20o1%5BSERIALIZE_1%5D%3B%0Alet%20s2%3A%20string%20%3D%20o1%5BSERIALIZE_2%5D%3B%0Aconsole.log(s1)%3B%0Aconsole.log(s2)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>const SERIALIZE_1 = Symbol("serialize-method-key"); // Symbol
const SERIALIZE_2 = "serialize-method-key"; // Constant

const o1 = { [SERIALIZE_1]: "1", [SERIALIZE_2]: "2" };

let s1: string = o1[SERIALIZE_1];
let s2: string = o1[SERIALIZE_2];
console.log(s1);
console.log(s2);</code></pre>
Ta cũng c&oacute; thể sử dụng hằng số hoặc k&yacute; hiệu để định nghĩa một interface với một k&yacute; hiệu chỉ số.
<pre class="language-ts" data-content="const%20SERIALIZE1%20%3D%20Symbol(%22serialize-method-key%22)%3B%20%2F%2F%20Symbol%0Ainterface%20Serializable1%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%5BSERIALIZE1%5D%3A%20string%3B%0A%7D%0A%0Alet%20seria1%3A%20Serializable1%20%3D%20%7B%20%5BSERIALIZE1%5D%20%3A%20%22%22%20%7D%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>const SERIALIZE1 = Symbol("serialize-method-key"); // Symbol
interface Serializable1 {
 [SERIALIZE1]: string;
}

let seria1: Serializable1 = { [SERIALIZE1] : "" };</code></pre>
<h2 style="text-align: justify;">Lưu &yacute;</h2>
Đ&ocirc;i khi, bạn c&oacute; thể c&oacute; một tập hợp c&aacute;c kh&oacute;a được x&aacute;c định sẵn m&agrave; bạn muốn &aacute;p dụng. Khi đ&oacute;, việc chỉ định kiểu l&agrave; <code>string</code> sẽ qu&aacute; chung chung v&agrave; kh&ocirc;ng đủ cụ thể. Đoạn code sau đ&acirc;y cho thấy ta kh&ocirc;ng thể định nghĩa một mảng c&aacute;c chuỗi (xem d&ograve;ng <code>MyTypeB</code> được comment) m&agrave; y&ecirc;u cầu phải c&oacute; một kiểu ri&ecirc;ng biệt chứa t&ecirc;n của c&aacute;c trường thuộc t&iacute;nh.
<pre class="language-ts" data-content="interface%20MyTypeA%20%7B%0A%C2%A0%C2%A0%5Bk%3A%20string%5D%3A%20string%3B%0A%7D%0A%0A%2F%2F%20interface%20MyTypeB%20%7B%0A%2F%2F%20%C2%A0%20%5Bk%3A%20%22id1%22%20%7C%20%22id2%22%5D%3A%20string%3B%0A%2F%2F%20%7D%0A%0Atype%20AllowedKey%20%3D%20%22Id1%22%20%7C%20%22Id2%22%3B%0Atype%20MyTypeC%20%3D%20%7B%0A%C2%A0%C2%A0%5Bk%20in%20AllowedKey%5D%3A%20string%3B%0A%7D%0Alet%20c%3A%20MyTypeC%20%3D%20%7B%20%22Id1%22%3A%20%22123%22%2C%20%22Id2%22%3A%20%22ABC%22%20%7D%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>interface MyTypeA {
 [k: string]: string;
}

// interface MyTypeB {
// [k: "id1" | "id2"]: string;
// }

type AllowedKey = "Id1" | "Id2";
type MyTypeC = {
 [k in AllowedKey]: string;
}
let c: MyTypeC = { "Id1": "123", "Id2": "ABC" };</code></pre>

Khóa với hằng số và ký hiệu