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 <code>never</code>, từ kh&oacute;a n&agrave;y được sử dụng để chỉ ra rằng một điều g&igrave; đ&oacute; kh&ocirc;ng bao giờ xảy ra.
Kiểu <code>never</code> c&oacute; nghĩa l&agrave; kh&ocirc;ng c&oacute; g&igrave; xảy ra. N&oacute; được sử dụng khi kiểm tra kiểu kh&ocirc;ng thể xảy ra hoặc trong t&igrave;nh huống m&agrave; lu&ocirc;n lu&ocirc;n xảy ra một ngoại lệ. C&oacute; một số điểm kh&aacute;c biệt giữa <code>void</code> v&agrave; <code>never</code>. Một h&agrave;m c&oacute; kiểu trả về r&otilde; r&agrave;ng l&agrave; <code>never</code> sẽ kh&ocirc;ng cho ph&eacute;p code trả về <code>undefined</code>, n&oacute; kh&aacute;c với một h&agrave;m c&oacute; kiểu trả về <code>void</code> cho ph&eacute;p code trả về <code>undefined</code>.
<pre class="language-ts" data-content="function%20functionThrow()%3A%20never%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0throw%20new%20Error(%22This%20function%20return%20never%22)%3B%0A%7D" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>function functionThrow(): never {
 throw new Error("This function return never");
}</code></pre>
Kiểu <code>never</code> l&agrave; kiểu con của mọi kiểu. Do đ&oacute;, bạn c&oacute; thể trả về <code>never</code> (v&iacute; dụ: đưa ra một ngoại lệ) khi kiểu trả về được chỉ định l&agrave; <code>void</code> hoặc <code>string</code>, nhưng kh&ocirc;ng thể trả về một chuỗi khi được kiểu trả về được đ&aacute;nh dấu r&otilde; r&agrave;ng l&agrave; <code>never</code>.
Trong TypeScript, kiểu <code>never</code> được sử dụng để thực hiện kiểm tra to&agrave;n diện. Kiểm tra to&agrave;n diện x&aacute;c minh rằng mọi trường hợp c&oacute; thể xảy ra (tất cả c&aacute;c kiểu trong union hoặc c&aacute;c lựa chọn trong enum) đều đ&atilde; được xử l&yacute;. &Yacute; tưởng l&agrave; TypeScript c&oacute; thể ph&aacute;t hiện ra một trường hợp chưa được xử l&yacute; ngay từ thời điểm thiết kế v&agrave; trong qu&aacute; tr&igrave;nh bi&ecirc;n dịch. C&aacute;ch thức hoạt động l&agrave; th&ocirc;ng qua việc sử dụng một t&ugrave;y chọn tiềm năng trong điều kiện else, đoạn code trả về <code>never</code>.
Tuy nhi&ecirc;n, khi tất cả c&aacute;c kiểu trong union hoặc tất cả c&aacute;c gi&aacute; trị của enum khiến chương tr&igrave;nh trả về một c&aacute;i g&igrave; đ&oacute; kh&aacute;c <code>never</code>, tr&igrave;nh bi&ecirc;n dịch sẽ kh&ocirc;ng đưa ra cảnh b&aacute;o. <code>never</code> thường được sử dụng khi m&atilde; nguồn ph&aacute;t triển v&agrave; c&oacute; sự thay đổi li&ecirc;n quan đến c&aacute;c kiểu gi&aacute; trị kh&aacute;c nhau. Khi một t&ugrave;y chọn được th&ecirc;m v&agrave;o, chẳng hạn như th&ecirc;m v&agrave;o <code>union</code> hoặc <code>enum</code>, TypeScript sẽ x&aacute;c định xem liệu c&oacute; trường hợp n&agrave;o m&agrave; h&agrave;m trả về <code>never</code> hay kh&ocirc;ng v&agrave; kh&ocirc;ng bi&ecirc;n dịch. Kể từ phi&ecirc;n bản 2.0, TypeScript c&oacute; thể x&aacute;c định xem m&atilde; lệnh c&oacute; được thực thi trong trường hợp mặc định (hoặc trường hợp <code>else</code> nếu bạn kh&ocirc;ng sử dụng c&acirc;u lệnh switch) hay kh&ocirc;ng.
V&iacute; dụ, đoạn code dưới đ&acirc;y c&oacute; một <code>enum</code> với hai phần tử. TypeScript biết rằng chỉ c&oacute; hai trường hợp c&oacute; thể xảy ra v&agrave; trường hợp mặc định (<code>else</code>) kh&ocirc;ng thể xảy ra. Khả năng nhận biết n&agrave;y của TypeScript l&agrave; ho&agrave;n hảo v&igrave; kiểu trả về của h&agrave;m chỉ nhận kiểu <code>string</code> v&agrave; kh&ocirc;ng nhận <code>never</code>. Nếu trong tương lai bạn th&ecirc;m một phần tử mới v&agrave;o enum (v&iacute; dụ: <code>ChoiceC</code>, m&agrave; kh&ocirc;ng th&ecirc;m một trường hợp mới v&agrave;o c&acirc;u lệnh switch) th&igrave; code c&oacute; thể gọi h&agrave;m <code>unhandledChoice</code> v&agrave; h&agrave;m trả về <code>never</code>.
<pre class="language-ts" data-content="enum%20EnumWithChoices%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0ChoiceA%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0ChoiceB%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0ChoiceC%2C%0A%7D%0A%0Afunction%20functionReturnStringFromEnum(c%3A%20EnumWithChoices)%3A%20string%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0switch%20(c)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0case%20EnumWithChoices.ChoiceA%3A%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0return%20%22A%22%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0case%20EnumWithChoices.ChoiceB%3A%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0return%20%22B%22%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0default%3A%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0return%20unhandledChoiceFromEnum(c)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%7D%0A%0Afunction%20unhandledChoiceFromEnum(x%3A%20never)%3A%20never%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0throw%20new%20Error(%22Choice%20not%20defined%22)%3B%0A%7D" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>enum EnumWithChoices {
 ChoiceA,
 ChoiceB,
 ChoiceC,
}

function functionReturnStringFromEnum(c: EnumWithChoices): string {
 switch (c) {
 case EnumWithChoices.ChoiceA:
 return "A";
 case EnumWithChoices.ChoiceB:
 return "B";
 default:
 return unhandledChoiceFromEnum(c);
 }
}

function unhandledChoiceFromEnum(x: never): never {
 throw new Error("Choice not defined");
}</code></pre>
Kiểu <code>never</code> cũng được sử dụng trong kiểu dẫn xuất m&agrave; bạn sẽ t&igrave;m hiểu trong c&aacute;c b&agrave;i học sau. Mỗi khi <code>never</code> được sử dụng, n&oacute; đ&aacute;nh dấu rằng code kh&ocirc;ng n&ecirc;n ở trong một trạng th&aacute;i cụ thể, nếu kh&ocirc;ng, code sẽ kh&ocirc;ng bi&ecirc;n dịch được.
Kiểu nguy&ecirc;n thủy <code>never</code> được giới thiệu từ phi&ecirc;n bản TypeScript 2.0. Việc sử dụng c&oacute; một số hạn chế nhưng đặc t&iacute;nh độc đ&aacute;o của từ kh&oacute;a <code>never</code> l&agrave;m cho n&oacute; mạnh mẽ hơn. V&iacute; dụ: never l&agrave; kiểu con của mọi kiểu nhưng kh&ocirc;ng thể l&agrave; kiểu con của bất kỳ kiểu n&agrave;o kh&aacute;c ngo&agrave;i ch&iacute;nh n&oacute;.
<pre class="language-ts" data-content="function%20functionReturnNever()%3A%20never%7B%0A%C2%A0%C2%A0throw%20Error(%22Error%20Message%22)%0A%7D%0Alet%20s%3A%20string%20%3D%20%22A%20string%22%3B%0A%2F%2F%20let%20n%3A%20never%20%3D%20s%3B%20%2F%2F%20A%20string%20is%20not%20a%20subtype%20of%20never%0Alet%20n%3A%20never%3B%0Atry%7B%0A%C2%A0%C2%A0n%20%3D%20functionReturnNever()%3B%0A%C2%A0%C2%A0s%20%3D%20n%3B%20%2F%2F%20Assignable%20because%20never%20is%20a%20subtype%0A%7D%0Acatch(e)%7B%0A%C2%A0%C2%A0console.log(e.message)%3B%0A%7D" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>function functionReturnNever(): never{
 throw Error("Error Message")
}
let s: string = "A string";
// let n: never = s; // A string is not a subtype of never
let n: never;
try{
 n = functionReturnNever();
 s = n; // Assignable because never is a subtype
}
catch(e){
 console.log(e.message);
}</code></pre>
Trong c&aacute;c trường hợp m&agrave; TypeScript kh&ocirc;ng thể x&aacute;c định một biến l&agrave; một kiểu cụ thể theo logic, n&oacute; sẽ đặt gi&aacute; trị của biến th&agrave;nh <code>never</code>. Trong v&iacute; dụ dưới đ&acirc;y, theo l&yacute; thuyết th&igrave; trường hợp <code>else</code> kh&ocirc;ng thể xảy ra v&igrave; biến <code>data</code> chỉ c&oacute; thể l&agrave; <code>number</code> hoặc <code>boolean</code>, tuy nhi&ecirc;n, ta vẫn c&oacute; thể viết m&atilde; lệnh cho <code>else</code>. Gi&aacute; trị của biến <code>data</code> trong trường hợp n&agrave;y l&agrave; <code>never</code>. Bạn c&oacute; thể di chuột qua biến v&agrave; xem thử.
<pre class="language-ts" data-content="declare%20function%20ajaxCall()%3A%20number%20%7C%20boolean%3B%0Alet%20data%20%3A%20number%20%7C%20boolean%20%3D%20ajaxCall()%3B%0Aif%20(typeof%20data%20%3D%3D%20%22number%22)%7B%0A%C2%A0%C2%A0console.log(%60The%20data%20is%20a%20number%20type%3A%20%24%7Btypeof%20data%7D%60)%3B%0A%7D%20else%20if%20(typeof%20data%20%3D%3D%20%22boolean%22)%7B%0A%C2%A0%C2%A0console.log(%60The%20data%20is%20a%20boolean%20type%3A%20%24%7Btypeof%20data%7D%60)%3B%0A%7D%20else%7B%0A%C2%A0%C2%A0console.log(%60Impossible%20ELSE%20case%3A%20%24%7Btypeof%20data%7D%60)%3B%20%2F%2F%20Hover%20data%20here%0A%7D" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>declare function ajaxCall(): number | boolean;
let data : number | boolean = ajaxCall();
if (typeof data == "number"){
 console.log(`The data is a number type: ${typeof data}`);
} else if (typeof data == "boolean"){
 console.log(`The data is a boolean type: ${typeof data}`);
} else{
 console.log(`Impossible ELSE case: ${typeof data}`); // Hover data here
}</code></pre>
Trong c&aacute;c b&agrave;i học sau, ch&uacute;ng ta sẽ thảo luận về c&aacute;c loại h&agrave;m kh&aacute;c nhau. Trong phạm vi b&agrave;i học n&agrave;y, ch&uacute;ng ta c&oacute; thể xem qua c&aacute;ch định nghĩa ba h&agrave;m v&agrave; c&aacute;ch ch&uacute;ng hoạt động kh&aacute;c nhau dựa tr&ecirc;n kiểu được suy luận. Nếu bạn di chuột qua biến <code>a</code>, <code>b</code> v&agrave; h&agrave;m <code>c</code>, bạn c&oacute; thể ngạc nhi&ecirc;n khi thấy c&aacute;c kiểu l&agrave; <code>never</code>, <code>never</code> v&agrave; <code>void</code>. L&yacute; do cho kết quả n&agrave;y li&ecirc;n quan đến c&aacute;ch JavaScript được sử dụng. Th&ocirc;ng tin chi tiết sẽ được đề cập trong b&agrave;i học về <code>function</code>.
<pre class="language-ts" data-content="let%20a%20%3D%20()%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0throw%20new%20Error(%22A%22)%3B%0A%7D%0A%0Alet%20b%20%3D%20function()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0throw%20new%20Error(%22B%22)%3B%0A%7D%0A%0Afunction%20c()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0throw%20new%20Error(%22C%22)%3B%0A%7D" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>let a = () =&gt; {
 throw new Error("A");
}

let b = function() {
 throw new Error("B");
}

function c() {
 throw new Error("C");
}</code></pre>
Cuối c&ugrave;ng, <code>never</code> được sử dụng để biểu thị c&aacute;c trạng th&aacute;i hoặc t&igrave;nh huống kh&ocirc;ng mong đợi hoặc kh&ocirc;ng n&ecirc;n xảy ra. V&iacute; dụ: Ngoại lệ kh&ocirc;ng phải l&agrave; một h&agrave;nh vi n&ecirc;n xảy ra. V&ograve;ng lặp v&ocirc; hạn trong h&agrave;m kh&ocirc;ng n&ecirc;n được thiết kế đề tồn tại l&acirc;u d&agrave;i trong hệ thống. Một điều kiện kh&ocirc;ng bao giờ được thực thi cũng kh&ocirc;ng n&ecirc;n tồn tại trong chương tr&igrave;nh.

Kiểu nguyên thủy never