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

B&agrave;i học n&agrave;y thảo luận c&aacute;ch l&agrave;m việc với ngoại lệ (exception).
<h2 style="text-align: justify;">N&eacute;m ngoại lệ</h2>
TypeScript tu&acirc;n theo chuẩn <code>ECMAScript</code> li&ecirc;n quan đến việc xử l&yacute; ngoại lệ. Bạn c&oacute; thể n&eacute;m một ngoại lệ mới bằng c&aacute;ch sử dụng từ kh&oacute;a <code>throw</code> theo sau l&agrave; một thực thể của ngoại lệ. Khi lỗi xảy ra, ta n&ecirc;n lu&ocirc;n lu&ocirc;n n&eacute;m ra một đối tượng ngoại lệ thay v&igrave; chuỗi m&ocirc; tả lỗi. L&yacute; do l&agrave; khi ta n&eacute;m ra một đối tượng, chương tr&igrave;nh sẽ cung cấp th&ocirc;ng tin chi tiết về to&agrave;n bộ call stack v&igrave; đối tượng phải kế thừa từ interface cơ bản <code>Error</code>. Interface <code>Error</code> x&aacute;c định t&ecirc;n, th&ocirc;ng b&aacute;o v&agrave; stack. Trường hợp duy nhất m&agrave; bạn kh&ocirc;ng cần phải đưa ra một thực thể của ngoại lệ l&agrave; khi sử dụng <code>ErrorConstructor</code>, n&oacute; cho ph&eacute;p bạn n&eacute;m lỗi trực tiếp bằng c&aacute;ch sử dụng <code>throw Error("Message here that is optional")</code>.
<pre class="language-ts" data-content="function%20throw1()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0throw%20%22error%20in%20string%22%3B%0A%7D%0A%0Afunction%20throw2()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0throw%20Error(%22Message%20Here%22)%3B%0A%7D%0A%0Afunction%20throw3()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0const%20err%3A%20Error%20%3D%20new%20Error(%22Message%20Here%22)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0throw%20err%3B%0A%7D%0A%0A%2F%2F%20throw1()%3B%0A%2F%2F%20throw2()%3B%0A%2F%2F%20throw3()%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>function throw1() {
 throw "error in string";
}

function throw2() {
 throw Error("Message Here");
}

function throw3() {
 const err: Error = new Error("Message Here");
 throw err;
}

// throw1();
// throw2();
// throw3();</code></pre>
Đoạn code tr&ecirc;n c&oacute; ba d&ograve;ng được comment. D&ograve;ng đầu ti&ecirc;n, d&ograve;ng 14, trả về một <code>string</code>. Khi chuỗi được n&eacute;m ra, đầu ra của chương tr&igrave;nh l&agrave;:
<pre class="language-ts" data-content="%2Fusercode%2Findex.ts%3A3%20throw%20%E2%80%9Cerror%20in%20string%E2%80%9D%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>/usercode/index.ts:3 throw &ldquo;error in string&rdquo;;</code></pre>
H&atilde;y comment d&ograve;ng 14 ra v&agrave; chạy thử d&ograve;ng 15 v&agrave; sau đ&oacute; l&agrave; d&ograve;ng 16. Cả hai đều trả về đầu ra chi tiết hơn:
<pre class="language-ts" data-content="%2Fusercode%2Findex.ts%3A6%20throw%20Error(%E2%80%9CMessage%20Here%E2%80%9D)%3B%20%5E%20Error%3A%20Message%20Here%20at%20throw2%20(%2Fusercode%2Findex.ts%3A6%3A11)%20at%20Object.%20(%2Fusercode%2Findex.ts%3A15%3A1)%20at%20Module._compile%20(internal%2Fmodules%2Fcjs%2Floader.js%3A778%3A30)%20at%20Module.m._compile%20(%2Fusr%2Flib%2Fnode_modules%2Fts-node%2Fsrc%2Findex.ts%3A473%3A23)%20at%20Module._extensions%E2%80%A6js%20(internal%2Fmodules%2Fcjs%2Floader.js%3A789%3A10)%20at%20Object.require.extensions.(anonymous%20function)%20%5Bas%20.ts%5D%20(%2Fusr%2Flib%2Fnode_modules%2Fts-node%2Fsrc%2Findex.ts%3A476%3A12)%20at%20Module.load%20(internal%2Fmodules%2Fcjs%2Floader.js%3A653%3A32)%20at%20tryModuleLoad%20(internal%2Fmodules%2Fcjs%2Floader.js%3A593%3A12)%20at%20Function.Module._load%20(internal%2Fmodules%2Fcjs%2Floader.js%3A585%3A3)%20at%20Function.Module.runMain%20(internal%2Fmodules%2Fcjs%2Floader.js%3A831%3A12)" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>/usercode/index.ts:6 throw Error(&ldquo;Message Here&rdquo;); ^ Error: Message Here at throw2 (/usercode/index.ts:6:11) at Object. (/usercode/index.ts:15:1) at Module._compile (internal/modules/cjs/loader.js:778:30) at Module.m._compile (/usr/lib/node_modules/ts-node/src/index.ts:473:23) at Module._extensions&hellip;js (internal/modules/cjs/loader.js:789:10) at Object.require.extensions.(anonymous function) [as .ts] (/usr/lib/node_modules/ts-node/src/index.ts:476:12) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12) at Function.Module._load (internal/modules/cjs/loader.js:585:3) at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)</code></pre>
Mặc d&ugrave; kết quả hơi kh&oacute; nh&igrave;n nhưng việc sử dụng đối tượng <code>Error</code> chắc chắn cung cấp nhiều th&ocirc;ng tin hơn l&agrave; sử dụng chuỗi.
<h2 style="text-align: justify;">Lỗi t&ugrave;y chỉnh</h2>
TypeScript cho ph&eacute;p ta kế thừa lớp <code>Error</code> để tạo ra lớp lỗi t&ugrave;y chỉnh ri&ecirc;ng. Việc tạo lớp lỗi t&ugrave;y chỉnh c&oacute; thể hữu &iacute;ch v&igrave; n&oacute; gi&uacute;p ph&acirc;n biệt loại lỗi n&agrave;o được n&eacute;m ra sau n&agrave;y để xử l&yacute; ngoại lệ một c&aacute;ch ph&ugrave; hợp. Ta c&oacute; thể so s&aacute;nh c&aacute;c th&ocirc;ng b&aacute;o lỗi, nhưng một thực h&agrave;nh tốt hơn l&agrave; sử dụng một đặc điểm độc đ&aacute;o v&agrave; kh&aacute;c biệt để ph&acirc;n biệt ngoại lệ. Lớp lỗi t&ugrave;y chỉnh kh&ocirc;ng chỉ cho ph&eacute;p so s&aacute;nh t&ecirc;n của ngoại lệ m&agrave; c&ograve;n cung cấp th&ocirc;ng tin bổ sung như số lượng lỗi, th&ocirc;ng tin ngữ cảnh, v.v.
[___WARNING_Đoạn code dưới đ&acirc;y đưa ra lỗi_WARNING___]
<pre class="language-ts" data-content="class%20MySpecificError%20extends%20Error%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0public%20data%3A%20string%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0constructor(data%3A%20string%2C%20message%3A%20string)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0super(message)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0Object.setPrototypeOf(this%2C%20MySpecificError.prototype)%3B%20%2F%2F%20Restore%20prototype%20chain%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%2F%2F%20OR%3A%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%2F%2F%20Object.setPrototypeOf(this%2C%20new.target.prototype)%3B%20%2F%2F%20Restore%20prototype%20chain%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0this.data%20%3D%20data%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%7D%0A%0Athrow%20new%20MySpecificError(%22dataHere%22%2C%20%22My%20Message%22)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>class MySpecificError extends Error {
 public data: string;
 constructor(data: string, message: string) {
 super(message);
 Object.setPrototypeOf(this, MySpecificError.prototype); // Restore prototype chain
 // OR:
 // Object.setPrototypeOf(this, new.target.prototype); // Restore prototype chain
 this.data = data;
 }
}

throw new MySpecificError("dataHere", "My Message");</code></pre>
Đoạn code tr&ecirc;n cần phải gọi h&agrave;m <code>Object.setPrototypeOf</code>. L&yacute; do l&agrave; với sự ra mắt của TypeScript phi&ecirc;n bản 2.1 khi sử dụng EcmaScript 6, phương thức tạo của <code>Error</code> sử dụng <code>new.target</code> để xử l&yacute; chuỗi nguy&ecirc;n mẫu. Trong c&aacute;c phi&ecirc;n bản EcmaScript trước đ&oacute;, điều n&agrave;y kh&ocirc;ng xảy ra. Bằng c&aacute;ch gọi h&agrave;m thủ c&ocirc;ng hoặc sử dụng nguy&ecirc;n mẫu của lớp để g&aacute;n, ta đảm bảo rằng cơ chế xử l&yacute; lỗi hoạt động đ&uacute;ng c&aacute;ch khi chuỗi nguy&ecirc;n mẫu đang gọi <code>new.target</code>. Nếu bạn kh&ocirc;ng &aacute;p dụng một trong hai phương ph&aacute;p tr&ecirc;n th&igrave; chương tr&igrave;nh sẽ gặp vấn đề khi sử dụng <code>instanceOf</code>, to&aacute;n tử n&agrave;y sẽ được sử dụng trong những b&agrave;i học sắp tới để ph&acirc;n biệt c&aacute;c ngoại lệ.
<h2 style="text-align: justify;">Xử l&yacute; ngoại lệ m&agrave; kh&ocirc;ng cần lỗi</h2>
Thực h&agrave;nh tốt nhất l&agrave; lu&ocirc;n sử dụng <code>Error()</code> hoặc <code>new Error()</code>, đ&oacute; l&agrave; những giải ph&aacute;p thay thế cho việc n&eacute;m trực tiếp một chuỗi. Bạn sẽ nhận được nhiều th&ocirc;ng tin hơn từ lỗi, chẳng hạn như stack.
Ta n&ecirc;n sử dụng:
<pre class="language-ts" data-content="throw%20Error(%22Message%22)%3B%0Athay%20v%C3%AC%3A%0Athrow%20%22Message%22%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>throw Error("Message");
thay v&igrave;:
throw "Message";</code></pre>
<h2 style="text-align: justify;">Một số điểm cần lưu &yacute;</h2>
Giống như mọi ng&ocirc;n ngữ lập tr&igrave;nh kh&aacute;c, ngoại lệ chỉ được sử dụng để xử l&yacute; những trường hợp đặc biệt trong đ&oacute; chương tr&igrave;nh đi theo luồng hoạt động kh&aacute;c khi t&igrave;nh huống ngoại lệ xảy ra. L&yacute; do l&agrave; v&igrave; luồng ngoại lệ kh&aacute; kh&oacute; hiểu.
C&oacute; những phương &aacute;n khả thi kh&aacute;c l&agrave;:
V&iacute; dụ: khi một h&agrave;m gặp lỗi, h&agrave;m c&oacute; thể trả về một đối tượng lỗi hoặc undefined. Tuy nhi&ecirc;n, việc trả về t&ugrave;y chọn c&oacute; nhược điểm l&agrave; n&oacute; chiếm vị tr&iacute; của gi&aacute; trị trả về tiềm năng. Để giải quyết vấn đề n&agrave;y, ta c&oacute; thể trả về một union bao gồm kiểu mong muốn v&agrave; kiểu ngoại lệ.
Tuy nhi&ecirc;n, giải ph&aacute;p với union thực hiện nhiều kiểm tra kiểu mỗi khi h&agrave;m được gọi, điều n&agrave;y c&oacute; thể g&acirc;y ra sự bất tiện.
<pre class="language-ts" data-content="function%20withReturn(p1%3Anumber)%0A%C2%A0%C2%A0%C2%A0%3A%20number%20%7C%20Error%20%7B%0A%C2%A0%C2%A0%C2%A0if(wrong)%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0return%20new%20Error(%22My%20error%20message%22)%3B%0A%C2%A0%C2%A0%C2%A0%7D%0A%C2%A0%C2%A0%C2%A0return%20%22String%20as%20expected%20when%20all%20good%22%3B%0A%7D" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>function withReturn(p1:number)
 : number | Error {
 if(wrong){
 return new Error("My error message");
 }
 return "String as expected when all good";
}</code></pre>
Một phương &aacute;n kh&aacute;c để th&ocirc;ng b&aacute;o về t&igrave;nh huống ngoại lệ l&agrave; sử dụng một tham số l&agrave; một h&agrave;m callback được gọi khi c&oacute; lỗi xảy ra.
<pre class="language-ts" data-content="function%20withCallback(%0A%C2%A0%C2%A0%C2%A0p1%3Anumber%2C%C2%A0%0A%C2%A0%C2%A0%C2%A0error%3A(errMsg%3A%20string)%20%3D%3E%20void)%0A%C2%A0%C2%A0%C2%A0%3Astring%20%7B%0A%C2%A0%C2%A0%C2%A0if(wrong)%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0error(%22My%20error%20message%22)%3B%0A%C2%A0%C2%A0%C2%A0%7D%0A%C2%A0%C2%A0%C2%A0return%20%22String%20as%20expected%20when%20all%20good%22%3B%0A%7D" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>function withCallback(
 p1:number, 
 error:(errMsg: string) =&gt; void)
 :string {
 if(wrong){
 error("My error message");
 }
 return "String as expected when all good";
}</code></pre>
Cuối c&ugrave;ng, một phương &aacute;n khả thi trong trường hợp code sử dụng promises l&agrave; từ chối promise.
<pre class="language-ts" data-content="function%20withPromise(p1%3A%20number)%C2%A0%0A%C2%A0%C2%A0%C2%A0%3D%3E%20Promise%3CError%3E%7B%0A%C2%A0%C2%A0%C2%A0if(wrong)%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0return%20Promise.reject(%22My%20error%20message)%3B%0A%C2%A0%C2%A0%C2%A0%7D%0A%C2%A0%C2%A0%C2%A0return%20Promise.resolve(%22String%20as%20expected%20when%20all%20good%22)%3B%0A%7D" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>function withPromise(p1: number) 
 =&gt; Promise&lt;Error&gt;{
 if(wrong){
 return Promise.reject("My error message);
 }
 return Promise.resolve("String as expected when all good");
}</code></pre>

Tạo ngoại lệ