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 c&aacute;ch đặt t&ecirc;n cho h&agrave;m, tạo h&agrave;m ẩn danh cũng như c&aacute;ch ph&acirc;n biệt c&aacute;c h&agrave;m.
<h2 style="text-align: justify;">Biểu thức v&agrave; khai b&aacute;o</h2>
JavaScript v&agrave; theo đ&oacute; l&agrave; TypeScript cung cấp nhiều c&aacute;ch định nghĩa h&agrave;m kh&aacute;c nhau. Nh&igrave;n chung, h&agrave;m c&oacute; thể được ph&acirc;n th&agrave;nh hai loại ch&iacute;nh: khai b&aacute;o h&agrave;m v&agrave; biểu thức h&agrave;m. Khai b&aacute;o h&agrave;m l&agrave; c&aacute;ch định nghĩa một h&agrave;m m&agrave; kh&ocirc;ng g&aacute;n h&agrave;m cho một biến n&agrave;o đ&oacute;. V&iacute; dụ:
<pre class="language-ts" data-content="function%20myFunction()%20..." data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>function myFunction() ...</code></pre>
Biểu thức h&agrave;m l&agrave; một h&agrave;m được g&aacute;n cho biến như một gi&aacute; trị. V&iacute; dụ:
<pre class="language-ts" data-content="const%20f%20%3D%20function()%20..." data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>const f = function() ...</code></pre>
V&iacute; dụ về biểu thức h&agrave;m cho thấy ta c&oacute; thể tạo ra c&aacute;c h&agrave;m ẩn danh trong đ&oacute; c&oacute; một con trỏ tới h&agrave;m nhưng h&agrave;m kh&ocirc;ng c&oacute; t&ecirc;n.
<pre class="language-ts" data-content="%2F%2F%20Named%20Function%0Afunction%20functionName1()%7B%7D%0AfunctionName1()%3B%20%2F%2F%20Invocation%0A%0A%2F%2F%20Anonymous%20Function%201%0Aconst%20pointerToFunction1%20%3D%20function()%7B%7D%0ApointerToFunction1()%3B%20%2F%2F%20Invocation%0A%0A%2F%2F%20Anonymous%20Function%202%20%2B%20Invocation%20A.K.A.%20IIFE%0A(function()%7B%7D)()%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>// Named Function
function functionName1(){}
functionName1(); // Invocation

// Anonymous Function 1
const pointerToFunction1 = function(){}
pointerToFunction1(); // Invocation

// Anonymous Function 2 + Invocation A.K.A. IIFE
(function(){})();</code></pre>
<h2 style="text-align: justify;">Đối số của h&agrave;m</h2>
C&aacute;c kiểu dữ liệu trong TypeScript c&oacute; thể được sử dụng để định nghĩa kiểu dữ liệu của c&aacute;c đối số trong h&agrave;m. Điều n&agrave;y &aacute;p dụng cho cả h&agrave;m c&oacute; t&ecirc;n v&agrave; h&agrave;m ẩn danh. C&aacute;ch th&ecirc;m kiểu cho đối số của h&agrave;m tương tự như c&aacute;ch chỉ định kiểu của biến, ta sử dụng dấu hai chấm sau t&ecirc;n biến.
<pre class="language-ts" data-content="function%20functionWithParameters(arg1%3A%20string%2C%20arg2%3A%20number)%7B%7D" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>function functionWithParameters(arg1: string, arg2: number){}</code></pre>
<h2 style="text-align: justify;">Kiểu trả về của h&agrave;m</h2>
TypeScript hỗ trợ định nghĩa kiểu trả về của h&agrave;m. Kiểu trả về của h&agrave;m được định nghĩa bằng c&aacute;ch sử dụng dấu hai chấm sau dấu ngoặc đơn đ&oacute;ng của h&agrave;m v&agrave; trước dấu ngoặc nhọn mở của th&acirc;n h&agrave;m. Kiểu trả về hoạt động tương tự như kiểu dữ liệu của biến v&agrave; c&oacute; thể l&agrave; kiểu nguy&ecirc;n thủy, interface hoặc l&agrave; union của nhiều kiểu.
V&iacute; dụ sau c&oacute; hai h&agrave;m. H&agrave;m đầu ti&ecirc;n trả về một <code>boolean</code> ở d&ograve;ng 1. H&agrave;m thứ hai ở d&ograve;ng 5 trả về một gi&aacute; trị duy nhất c&oacute; thể l&agrave; <code>boolean</code> hoặc <code>number</code>.
<pre class="language-ts" data-content="function%20functionWithAReturnType()%3A%20boolean%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20true%3B%0A%7D%0A%0Afunction%20functionWithTwoReturnType()%3A%20boolean%20%7C%20number%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0return%201%3B%0A%7D" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>function functionWithAReturnType(): boolean {
 return true;
}

function functionWithTwoReturnType(): boolean | number {
 return 1;
}</code></pre>
Kết quả kh&ocirc;ng được in ra m&agrave;n h&igrave;nh, hai h&agrave;m c&oacute; c&aacute;c kiểu trả về kh&aacute;c nhau.
<h2 style="text-align: justify;">Suy luận kiểu void hoặc never</h2>
Trong b&agrave;i học trước về <code>never</code>, bạn đ&atilde; học rằng TypeScript sẽ suy luận kiểu trả về của c&aacute;c h&agrave;m theo c&aacute;ch kh&aacute;c nhau trong một số trường hợp đặc biệt. Trong đoạn code sau, khai b&aacute;o h&agrave;m <code>c</code> x&aacute;c định trả về kiểu l&agrave; <code>void</code> thay v&igrave; <code>never</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>
L&yacute; do khiến khai b&aacute;o h&agrave;m c&oacute; sự kh&aacute;c biệt l&agrave; do cơ chế ghi đ&egrave;, trong đ&oacute; một lớp cơ sở định nghĩa một h&agrave;m dự kiến ​​sẽ được định nghĩa lại bởi một lớp con. N&oacute; quy định rằng th&acirc;n h&agrave;m trong lớp cơ sở trả về một ngoại lệ m&agrave; sau đ&oacute; sẽ tham chiếu đến th&acirc;n h&agrave;m trong lớp con. Nếu TypeScript suy luận rằng kiểu l&agrave; <code>never</code> th&igrave; định nghĩa của th&acirc;n h&agrave;m trong lớp cơ sở sẽ kh&ocirc;ng thể x&aacute;c định kiểu trả về, v&igrave; <code>never</code> kh&ocirc;ng phải l&agrave; kiểu con của bất kỳ kiểu n&agrave;o.
<pre class="language-ts" data-content="class%20BaseClass%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0defineMeLater()%3A%20never%20%7B%20%2F%2F%20Infer%20void%2C%20uncomment%20never%20to%20see%20the%20consequence%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0throw%20new%20Error(%22Define%20me%20in%20a%20subclass%22)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%7D%0A%0Aclass%20SubClass%20extends%20BaseClass%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0defineMeLater()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0console.log(%22SubClass%20code%22)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%7D%0A%0Alet%20c%20%3D%20new%20SubClass()%3B%0Ac.defineMeLater()%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>class BaseClass {
 defineMeLater(): never { // Infer void, uncomment never to see the consequence
 throw new Error("Define me in a subclass");
 }
}

class SubClass extends BaseClass {
 defineMeLater() {
 console.log("SubClass code");
 }
}

let c = new SubClass();
c.defineMeLater();</code></pre>
Trong đoạn code tr&ecirc;n, việc thay đổi kiểu trả về của <code>defineMeLater</code> trong <code>BaseClass</code> khiến <code>SubClass</code> bi&ecirc;n dịch thất bại. Bạn c&oacute; thể thấy điều đ&oacute; bằng c&aacute;ch thay đổi (uncomment) kiểu của <code>defineMeLater</code> th&agrave;nh <code>never</code>, code sẽ kh&ocirc;ng bi&ecirc;n dịch v&igrave; khi đưa ra một lỗi thi h&agrave;m trả về kiểu <code>never</code> trong khi <code>SubClass</code> trả về kiểu <code>void</code> ngầm định.
<h2 style="text-align: justify;">Phi&ecirc;n bản ngắn gọn</h2>
Khi định nghĩa kiểu cho h&agrave;m ẩn danh, bạn c&oacute; thể viết code ngắn gọn bằng c&aacute;ch sử dụng k&yacute; hiệu fat arrow (h&agrave;m mũi t&ecirc;n) để chỉ định kiểu trả về, tiếp theo l&agrave; dấu bằng để định nghĩa h&agrave;m.
H&agrave;m mũi t&ecirc;n đ&atilde; được giới thiệu từ phi&ecirc;n bản ECMAScript 6 v&agrave; cung cấp một c&aacute;ch kh&aacute;c để định nghĩa h&agrave;m. N&oacute; r&uacute;t gọn code bằng c&aacute;ch loại bỏ từ kh&oacute;a <code>function</code> v&agrave; thay v&agrave;o đ&oacute; sử dụng dấu bằng theo sau l&agrave; dấu lớn hơn. C&uacute; ph&aacute;p bắt đầu bằng c&aacute;ch mở ngoặc đơn, định nghĩa c&aacute;c tham số, đ&oacute;ng ngoặc đơn, sử dụng h&agrave;m mũi t&ecirc;n <code>=&gt;</code>, mở dấu ngoặc nhọn, viết phần th&acirc;n h&agrave;m v&agrave; cuối c&ugrave;ng đ&oacute;ng dấu ngoặc nhọn. Vị tr&iacute; sau dấu ngoặc đơn đ&oacute;ng (giữa dấu hai chấm v&agrave; h&agrave;m mũi t&ecirc;n) chứa kiểu trả về của h&agrave;m.
<pre class="language-ts" data-content="const%20fatarrow%20%3D%20(p%3A%20number)%3A%20number%20%3D%3E%20%7B%20return%20p%20*%20100%3B%20%7D" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>const fatarrow = (p: number): number =&gt; { return p * 100; }</code></pre>
Ngo&agrave;i t&iacute;nh ngắn gọn, c&uacute; ph&aacute;p mũi t&ecirc;n cũng giữ nguy&ecirc;n tham chiếu cho từ kh&oacute;a <code>this</code> từ ngữ cảnh cha nơi h&agrave;m được tạo. Đ&acirc;y l&agrave; một cải tiến lớn v&igrave; trước đ&acirc;y, bạn phải tạo một biến tạm thời để lưu trữ gi&aacute; trị của <code>this</code> trước khi tạo h&agrave;m để sử dụng biến đ&oacute;. Bằng c&aacute;ch sử dụng h&agrave;m mũi t&ecirc;n, gi&aacute; trị của <code>this</code> sẽ kh&ocirc;ng dễ d&agrave;ng bị thay đổi dựa tr&ecirc;n c&aacute;ch h&agrave;m được gọi, gi&uacute;p loại sự kh&ocirc;ng ổn định trong việc sử dụng <code>this</code>.

Hàm có tên và hàm ẩn danh