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ấy c&aacute;ch TypeScript định nghĩa r&otilde; r&agrave;ng kiểu dữ liệu nguy&ecirc;n thủy symbol v&agrave; kiểu con của n&oacute; l&agrave; unique symbol.
<h2 style="text-align: justify;">Symbol</h2>
<code>Symbol</code> l&agrave; một kiểu nguy&ecirc;n thủy trong ECMAScript 2015 v&agrave; c&aacute;c phi&ecirc;n bản sau đ&oacute;. TypeScript hỗ trợ c&aacute;c chuẩn của ECMAScript, v&igrave; vậy n&oacute; cũng hỗ trợ kiểu dữ liệu <code>Symbol</code>. Dấu bằng được sử dụng để g&aacute;n gi&aacute; trị cho một biến kiểu symbol m&agrave; kh&ocirc;ng cần từ kh&oacute;a <code>new</code> như khi tạo đối tượng, nhưng cần phải c&oacute; cặp dấu ngoặc đơn. Mục ti&ecirc;u của symbol l&agrave; cung cấp c&aacute;c biến duy nhất v&agrave; kh&ocirc;ng thay đổi.
Một symbol c&oacute; thể nhận một tham số với gi&aacute; trị l&agrave; chuỗi. Định nghĩa hai symbol với c&ugrave;ng một tham số sẽ tạo ra hai symbol kh&aacute;c nhau. Tr&ecirc;n thực tế, tham số chỉ được sử dụng để hỗ trợ việc hiển thị th&ocirc;ng tin khi in symbol ra console, từ đ&oacute; gi&uacute;p ta ph&acirc;n biệt c&aacute;c symbol một c&aacute;ch trực quan.
Hằng số kh&aacute;c symbol ở chỗ symbol l&agrave; duy nhất. Khi sử dụng hằng số chuỗi, ai đ&oacute; c&oacute; thể truyền một chuỗi c&oacute; gi&aacute; trị giống với hằng số v&agrave; chuỗi đ&oacute; sẽ được chấp nhận như l&agrave; một gi&aacute; trị hợp lệ. Tuy nhi&ecirc;n, khi sử dụng symbol hằng số, chỉ c&oacute; c&ugrave;ng một symbol hằng số mới c&oacute; gi&aacute; trị bằng nhau. Với symbol, ta kh&ocirc;ng thể &eacute;p kiểu n&oacute; th&agrave;nh chuỗi. Điều n&agrave;y c&oacute; nghĩa l&agrave; bạn kh&ocirc;ng thể th&ecirc;m một chuỗi v&agrave;o symbol v&agrave; mong đợi n&oacute; trở th&agrave;nh chuỗi.
<pre class="language-ts" data-content="let%20v1%20%3D%20%22value1%22%3B%0Alet%20v2%20%3D%20%22value1%22%3B%0Aif%20(v1%20%3D%3D%3D%20v2)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0console.log(%22Equal%20when%20string%22)%3B%20%2F%2F%20This%20will%20print%0A%7D%0Alet%20s1%20%3D%20Symbol(%22value1%22)%3B%0Alet%20s2%20%3D%20Symbol(%22value1%22)%3B%0Aif%20(s1%20%3D%3D%3D%20s2)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0console.log(%22Equal%20when%20symbol%22)%3B%20%2F%2F%20This%20will%20not%20print%2C%20they%20are%20not%20equal%0A%7D" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>let v1 = "value1";
let v2 = "value1";
if (v1 === v2) {
 console.log("Equal when string"); // This will print
}
let s1 = Symbol("value1");
let s2 = Symbol("value1");
if (s1 === s2) {
 console.log("Equal when symbol"); // This will not print, they are not equal
}</code></pre>
Trường thuộc t&iacute;nh của đối tượng c&oacute; thể l&agrave; symbol. Để g&aacute;n gi&aacute; trị cho trường thuộc t&iacute;nh symbol, ta sử dụng symbol đ&oacute; trong cặp dấu ngoặc vu&ocirc;ng. H&atilde;y nhớ rằng c&aacute;c trường thuộc t&iacute;nh được định nghĩa bằng symbol sẽ kh&ocirc;ng xuất hiện khi bạn gọi <code>Object.defineProperty</code> hoặc <code>Object.getOwnPropertyNames</code>.
Để lấy tất cả c&aacute;c trường thuộc t&iacute;nh được định nghĩa bởi symbol, bạn phải sử dụng <code>getOwnPropertySymbols</code>. Nếu bạn muốn lấy c&aacute;c thuộc t&iacute;nh dựa tr&ecirc;n symbol v&agrave; c&aacute;c thuộc t&iacute;nh th&ocirc;ng thường, bạn phải sử dụng <code>Reflect.ownKeys()</code>. Mục ti&ecirc;u cốt l&otilde;i của symbol l&agrave; tạo c&aacute;c th&agrave;nh vi&ecirc;n duy nhất trong đối tượng v&agrave; tr&aacute;nh những xung đột m&agrave; chuỗi th&ocirc;ng thường kh&ocirc;ng thể đảm bảo được.
<pre class="language-ts" data-content="const%20prop1%20%3D%20Symbol()%3B%0Aconst%20obj%20%3D%20%7B%20%5Bprop1%5D%3A%20%22p1%22%20%7D%3B%0A%0A%2F%2F%20console.log(obj.prop1)%3B%20%2F%2F%20Does%20not%20compile%0Aconsole.log(obj%5Bprop1%5D)%3B%20%2F%2F%20%22p1%22" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>const prop1 = Symbol();
const obj = { [prop1]: "p1" };

// console.log(obj.prop1); // Does not compile
console.log(obj[prop1]); // "p1"</code></pre>
<h2 style="text-align: justify;">Unique symbol</h2>
<code>unique symbol</code> chỉ c&oacute; thể được định nghĩa bằng c&aacute;ch sử dụng <code>const</code> hoặc <code>readonly static</code>. <code>unique symbol</code> được sử dụng để tạo một kiểu hằng kh&ocirc;ng thể bị nhầm lẫn với c&aacute;c symbol kh&aacute;c. Do đ&oacute;, kiểu của <code>unique symbol</code> kh&ocirc;ng phải l&agrave; <code>symbol</code> m&agrave; l&agrave; một <code>symbol</code> c&oacute; danh t&iacute;nh duy nhất.
V&iacute; dụ: một <code>string</code> c&oacute; thể l&agrave; string hoặc <code>string literal</code>. Khi di chuột qua biến đầu ti&ecirc;n của đoạn code dưới đ&acirc;y, bạn sẽ thấy n&oacute; c&oacute; kiểu <code>string</code>, trong khi kiểu của biến thứ hai l&agrave; <code>Value3</code>.
<pre class="language-ts" data-content="let%20aString%3A%20string%20%3D%20%22Value%201%22%3B%0AaString%20%3D%20%22Value%202%22%3B%0A%0Aconst%20aSecondString%20%3D%20%22Value3%22%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>let aString: string = "Value 1";
aString = "Value 2";

const aSecondString = "Value3";</code></pre>
<code>unique symbol</code> cũng tương tự. Trong đoạn code dưới đ&acirc;y, biến đầu ti&ecirc;n v&agrave; thứ hai đều l&agrave; kiểu <code>Symbol</code>. Tuy nhi&ecirc;n, symbol cuối c&ugrave;ng kh&ocirc;ng c&oacute; kiểu <code>Symbol</code> m&agrave; c&oacute; kiểu <code>typeof(aThirdSymbol)</code>.
<pre class="language-ts" data-content="let%20aSymbol%3A%20Symbol%20%3D%20Symbol(%22Value1%22)%3B%0AaSymbol%20%3D%20Symbol(%22Value2%22)%3B%20%2F%2F%20Type%20is%3A%20Symbol%0A%0Aconst%20aSecondSymbol%3A%20Symbol%20%3D%20Symbol(%22Value3%22)%3B%C2%A0%20%2F%2F%20Type%20is%3A%20Symbol%0Aconst%20aThirdSymbol%3A%20unique%20symbol%20%3D%20Symbol(%22Value3%22)%3B%C2%A0%20%2F%2F%20Type%20is%3A%20typeof(aThirdSymbol)" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>let aSymbol: Symbol = Symbol("Value1");
aSymbol = Symbol("Value2"); // Type is: Symbol

const aSecondSymbol: Symbol = Symbol("Value3"); // Type is: Symbol
const aThirdSymbol: unique symbol = Symbol("Value3"); // Type is: typeof(aThirdSymbol)</code></pre>
<code>unique symbol</code> chỉ c&oacute; thể được khai b&aacute;o bằng <code>const</code>. <code>unique symbol</code> cũng l&agrave; duy nhất, do đ&oacute;, nếu ta so s&aacute;nh hai <code>unique symbol</code> với nhau th&igrave; kết quả lu&ocirc;n lu&ocirc;n l&agrave; <code>false</code>. V&iacute; dụ tiếp theo so s&aacute;nh một <code>Symbol</code> với một <code>Symbol</code> kh&aacute;c v&agrave; một <code>Symbol</code> với <code>unique symbol</code>.
<pre class="language-ts" data-content="let%20s1%3A%20Symbol%20%3D%20Symbol(%22s1%22)%3B%20%2F%2F%20Type%20is%3A%20Symbol%0Aconst%20s2%3A%20Symbol%20%3D%20Symbol(%22s2%22)%3B%C2%A0%20%2F%2F%20Type%20is%3A%20Symbol%0Aconst%20s3%3A%20unique%20symbol%20%3D%20Symbol(%22s3%22)%3B%C2%A0%20%2F%2F%20Type%20is%3A%20typeof(s3)%0Aconst%20s4%3A%20unique%20symbol%20%3D%20Symbol(%22s4%22)%3B%C2%A0%20%2F%2F%20Type%20is%3A%20typeof(s4)%0A%0Aif%20(s1%20%3D%3D%3D%20s2)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0console.log(%22S1%20and%20S2%20are%20the%20same%20symbol%22)%3B%20%2F%2F%20Won't%20print%0A%7D%0A%0Aif%20(s3%20%3D%3D%3D%20s2)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0console.log(%22S3%20and%20S2%20are%20the%20same%20symbol%22)%3B%20%2F%2F%20Won't%20print%0A%7D%0A%0A%2F%2F%20if%20(s3%20%3D%3D%3D%20s4)%20%7B%0A%2F%2F%20%C2%A0%20%C2%A0%20%2F%2F%20Does%20not%20compile%0A%2F%2F%20%7D" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>let s1: Symbol = Symbol("s1"); // Type is: Symbol
const s2: Symbol = Symbol("s2"); // Type is: Symbol
const s3: unique symbol = Symbol("s3"); // Type is: typeof(s3)
const s4: unique symbol = Symbol("s4"); // Type is: typeof(s4)

if (s1 === s2) {
 console.log("S1 and S2 are the same symbol"); // Won't print
}

if (s3 === s2) {
 console.log("S3 and S2 are the same symbol"); // Won't print
}

// if (s3 === s4) {
// // Does not compile
// }</code></pre>

Kiểu Symbol và Unique Symbol