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, bạn sẽ t&igrave;m hiểu về kiểu `unknown`.
Kiểu <code>unknown</code> c&oacute; một phần giống một kiểu dữ liệu cụ thể v&agrave; một phần giống kiểu <code>any</code> cho ph&eacute;p biểu diễn mọi kiểu dữ liệu. Khai b&aacute;o một biến với kiểu <code>unknown</code> cho ph&eacute;p ta thiết lập nhiều kiểu dữ liệu đồng thời ngăn chặn việc truy cập kh&ocirc;ng mong muốn v&agrave;o c&aacute;c trường thuộc t&iacute;nh hoặc gi&aacute; trị của kiểu đ&oacute;. Đoạn code sau đ&acirc;y cho thấy một biến với kiểu <code>any</code> c&oacute; thể được g&aacute;n một chuỗi v&agrave; sau đ&oacute; được sử dụng với một h&agrave;m kiểu <code>string</code>.
Sau đ&oacute;, biến được g&aacute;n cho một gi&aacute; trị l&agrave; <code>number</code> m&agrave; kh&ocirc;ng c&oacute; h&agrave;m <code>substr</code>. Tuy nhi&ecirc;n, TypeScript kh&ocirc;ng ph&aacute;t hiện được việc gọi một h&agrave;m kh&ocirc;ng tồn tại.
<pre class="language-ts" data-content="let%20variable1%3A%20any%3B%0Avariable1%20%3D%20%22It%20is%20a%20string%22%3B%0Aconsole.log(variable1.substr(0%2C2))%20%2F%2F%20Output%20%22it%22%0Avariable1%20%3D%201%3B%0Aconsole.log(variable1.substr(0%2C2))%20%2F%2F%20Crash" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>let variable1: any;
variable1 = "It is a string";
console.log(variable1.substr(0,2)) // Output "it"
variable1 = 1;
console.log(variable1.substr(0,2)) // Crash</code></pre>
Việc thay đổi kiểu từ <code>any</code> th&agrave;nh <code>unknown</code> th&ocirc;ng b&aacute;o cho TypeScript biết rằng kiểu đ&oacute; c&oacute; thể nhận bất kỳ gi&aacute; trị n&agrave;o nhưng phải sử dụng cẩn thận v&igrave; n&oacute; kh&ocirc;ng cho ph&eacute;p gọi h&agrave;m.
<pre class="language-ts" data-content="let%20variable2%3A%20unknown%3B%0Avariable2%20%3D%20%22It%20is%20a%20string%22%3B%0Aconsole.log(variable2.substr(0%2C2))%20%2F%2F%20Does%20not%20compile%20here%0Avariable2%20%3D%201%3B%0Aconsole.log(variable2.substr(0%2C2))%20%2F%2F%20Does%20not%20compile%20here" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>let variable2: unknown;
variable2 = "It is a string";
console.log(variable2.substr(0,2)) // Does not compile here
variable2 = 1;
console.log(variable2.substr(0,2)) // Does not compile here</code></pre>
C&aacute;ch duy nhất để truy cập c&aacute;c trường thuộc t&iacute;nh hoặc gi&aacute; trị ẩn l&agrave; th&ocirc;ng b&aacute;o r&otilde; r&agrave;ng cho TypeScript kiểu của biến. Điều n&agrave;y c&oacute; thể được thực hiện bằng c&aacute;ch chuyển kiểu hoặc sử dụng khẳng định kiểu. V&iacute; dụ dưới đ&acirc;y cho ph&eacute;p một biến kiểu <code>unknown</code> sử dụng h&agrave;m <code>string</code>, <code>substr</code>. Biến <code>variable3</code> c&oacute; kiểu l&agrave; <code>unknown</code> nhưng được chuyển kiểu r&otilde; r&agrave;ng bằng c&aacute;ch khẳng định kiểu l&agrave; <code>string</code>.
&Eacute;p kiểu kh&ocirc;ng được khuyến nghị sử dụng v&igrave; n&oacute; c&oacute; thể dẫn đến việc x&aacute;c định sai kiểu dữ liệu. V&iacute; dụ: biến <code>variable3</code> thực tế l&agrave; <code>number</code> nhưng được &eacute;p kiểu l&agrave; <code>string</code>. Việc &eacute;p kiểu l&agrave; <code>unknown</code> thường kh&aacute; nguy hiểm v&agrave; n&ecirc;n sử dụng cẩn thận.
<pre class="language-ts" data-content="let%20variable3%3A%20unknown%3B%0Avariable3%20%3D%20%22It%20is%20a%20string%22%3B%0Alet%20variable3String%20%3D%20variable3%20as%20string%3B%0Aconsole.log(variable3String.substr(0%2C2))" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>let variable3: unknown;
variable3 = "It is a string";
let variable3String = variable3 as string;
console.log(variable3String.substr(0,2))</code></pre>
<code>unknown</code> v&agrave; <code>null</code> đều c&oacute; thể được x&aacute;c minh m&agrave; kh&ocirc;ng cần sử dụng <code>==</code> hoặc <code>===</code> v&igrave; cả hai đều được coi l&agrave; gi&aacute; trị falsy trong JavaScript
<pre class="language-ts" data-content="let%20und%3A%20string%20%7C%20undefined%20%3D%20undefined%3B%0Aif(und)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0console.log(und)%0A%7D%20else%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0console.log(%22The%20value%20is%20undefined%22)%0A%7D" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>let und: string | undefined = undefined;
if(und) {
 console.log(und)
} else {
 console.log("The value is undefined")
}</code></pre>
Trong trường hợp bạn cần hiển thị một gi&aacute; trị trong một đối tượng c&oacute; nhiều trường <code>undefined/null</code> (hoặc t&ugrave;y chọn), bạn cần thực hiện một số kiểm tra. V&iacute; dụ dưới đ&acirc;y cho thấy chỉ c&oacute; đối tượng cuối c&ugrave;ng hiển thị chuỗi v&igrave; c&aacute;c đối tượng kh&aacute;c trước đ&oacute; c&oacute; c&aacute;c trường lồng nhau c&oacute; gi&aacute; trị <code>undefined</code>.
<pre class="language-ts" data-content="interface%20ObjectC%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0m3%3A%20string%3B%0A%7D%0Ainterface%20ObjectB%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0m2%3F%3A%20ObjectC%3B%0A%7D%0Ainterface%20ObjectA%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0m1%3F%3A%20ObjectB%3B%0A%7D%0A%0Afunction%20print(o%3A%20ObjectA)%3A%20void%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0if%20(o.m1)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0if%20(o.m1.m2)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0console.log(o.m1.m2.m3)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%7D%0A%0Aconst%20obj1%3A%20ObjectA%20%3D%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0m1%3A%20undefined%2C%0A%7D%3B%0Aconst%20obj2%3A%20ObjectA%20%3D%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0m1%3A%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0m2%3A%20undefined%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%2C%0A%7D%3B%0Aconst%20obj3%3A%20ObjectA%20%3D%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0m1%3A%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0m2%3A%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0m3%3A%20%22Yeah!%22%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7D%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%2C%0A%7D%3B%0Aprint(obj1)%3B%0Aprint(obj2)%3B%0Aprint(obj3)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>interface ObjectC {
 m3: string;
}
interface ObjectB {
 m2?: ObjectC;
}
interface ObjectA {
 m1?: ObjectB;
}

function print(o: ObjectA): void {
 if (o.m1) {
 if (o.m1.m2) {
 console.log(o.m1.m2.m3);
 }
 }
}

const obj1: ObjectA = {
 m1: undefined,
};
const obj2: ObjectA = {
 m1: {
 m2: undefined,
 },
};
const obj3: ObjectA = {
 m1: {
 m2: {
 m3: "Yeah!",
 },
 },
};
print(obj1);
print(obj2);
print(obj3);</code></pre>
Từ phi&ecirc;n bản TypeScript 3.7 trở đi, ch&uacute;ng ta c&oacute; thể r&uacute;t gọn điều kiện kiểm tra <code>null</code> v&agrave; <code>undefined</code> bằng c&aacute;ch sử dụng optional chaining. Optional chaining sử dụng <code>?.</code> v&agrave; trả về <code>undefined</code> nếu chuỗi <code>?.</code> chứa một trường thuộc t&iacute;nh l&agrave; <code>null</code> hoặc <code>undefined</code>. Trong trường hợp ngược lại, n&oacute; trả về gi&aacute; trị của trường thuộc t&iacute;nh đ&oacute;. Nếu bạn thay đổi v&iacute; dụ trước để sử dụng optional chaining, code sẽ được r&uacute;t gọn th&agrave;nh:
<pre class="language-ts" data-content="interface%20ObjectC%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0m3%3A%20string%3B%0A%7D%0Ainterface%20ObjectB%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0m2%3F%3A%20ObjectC%3B%0A%7D%0Ainterface%20ObjectA%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0m1%3F%3A%20ObjectB%3B%0A%7D%0A%0Afunction%20print(o%3A%20ObjectA)%3A%20void%20%7B%0A%C2%A0%C2%A0if(o.m1%3F.m2)%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0console.log(o.m1.m2.m3)%3B%0A%C2%A0%C2%A0%7D%0A%7D%0A%0Aconst%20obj1%3A%20ObjectA%20%3D%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0m1%3A%20undefined%2C%0A%7D%3B%0Aconst%20obj2%3A%20ObjectA%20%3D%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0m1%3A%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0m2%3A%20undefined%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%2C%0A%7D%3B%0Aconst%20obj3%3A%20ObjectA%20%3D%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0m1%3A%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0m2%3A%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0m3%3A%20%22Yeah!%22%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7D%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%2C%0A%7D%3B%0Aprint(obj1)%3B%0Aprint(obj2)%3B%0Aprint(obj3)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>interface ObjectC {
 m3: string;
}
interface ObjectB {
 m2?: ObjectC;
}
interface ObjectA {
 m1?: ObjectB;
}

function print(o: ObjectA): void {
 if(o.m1?.m2){
 console.log(o.m1.m2.m3);
 }
}

const obj1: ObjectA = {
 m1: undefined,
};
const obj2: ObjectA = {
 m1: {
 m2: undefined,
 },
};
const obj3: ObjectA = {
 m1: {
 m2: {
 m3: "Yeah!",
 },
 },
};
print(obj1);
print(obj2);
print(obj3);</code></pre>
Theo c&aacute;ch tương tự, TypeScript c&oacute; nullish coalescing cho ph&eacute;p r&uacute;t gọn code trước khi gọi một gi&aacute; trị c&oacute; thể l&agrave; <code>null</code> hoặc <code>undefined</code>. Nếu bạn chạy đoạn code sau một số lần, đ&ocirc;i khi bạn sẽ nhận được gi&aacute; trị từ h&agrave;m v&agrave; đ&ocirc;i khi l&agrave; gi&aacute; trị mặc định.
<pre class="language-ts" data-content="function%20getValue()%3A%20string%20%7C%20undefined%7B%0A%C2%A0%C2%A0if%20(Math.random()%20%3E%200.5)%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20undefined%3B%0A%C2%A0%C2%A0%7D%0A%C2%A0%C2%A0return%20%22Good%22%3B%0A%7D%0A%0Alet%20value%20%3D%20getValue()%3B%0Aif(!value)%7B%0A%C2%A0%C2%A0value%20%3D%20%22Default%22%0A%7D%0Aconsole.log(value)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>function getValue(): string | undefined{
 if (Math.random() &gt; 0.5){
 return undefined;
 }
 return "Good";
}

let value = getValue();
if(!value){
 value = "Default"
}
console.log(value);</code></pre>
Với TypeScript, từ phi&ecirc;n bản 3.7, ta c&oacute; thể sử dụng <code>??</code> để bỏ qua c&acirc;u lệnh if.
<pre class="language-ts" data-content="function%20getValue()%3A%20string%20%7C%20undefined%7B%0A%C2%A0%C2%A0if%20(Math.random()%20%3E%200.5)%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20undefined%3B%0A%C2%A0%C2%A0%7D%0A%C2%A0%C2%A0return%20%22Good%22%3B%0A%7D%0A%0Alet%20value%20%3D%20getValue()%20%3F%3F%20%22Default%22%3B%0Aconsole.log(value)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>function getValue(): string | undefined{
 if (Math.random() &gt; 0.5){
 return undefined;
 }
 return "Good";
}

let value = getValue() ?? "Default";
console.log(value);</code></pre>
Trong c&aacute;c b&agrave;i học trước, ta đ&atilde; học rằng phương thức tạo của đối tượng <code>Boolean</code> sử dụng <code>unknown</code>. Phương thức tạo c&oacute; thể chấp nhận <code>any</code>, nhưng với <code>unknown</code>, kiểu chắc chắn được giữ nguy&ecirc;n b&ecirc;n trong phương thức tạo của boolean v&agrave; giới hạn c&aacute;c trường thuộc t&iacute;nh c&oacute; thể truy cập trong m&atilde; lệnh b&ecirc;n trong phương thức tạo.

Sử dụng kiểu ‘unknown’ thay vì ‘any’