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 xử l&yacute; ngoại lệ trong m&atilde; đồng bộ.
<h2 style="text-align: justify;">M&atilde; đồng bộ</h2>
Ngoại lệ bất đồng bộ xảy ra khi m&atilde; bất đồng bộ n&eacute;m ra một ngoại lệ. M&atilde; bất đồng bộ thường li&ecirc;n quan đến kh&aacute;i niệm <code>Promise</code>. Trong TypeScript (cũng như JavaScript), m&atilde; bất đồng bộ l&agrave; phần chương tr&igrave;nh được thực thi độc lập với luồng thực hi ch&iacute;nh của chương tr&igrave;nh. Mục ti&ecirc;u l&agrave; c&oacute; một t&aacute;c vụ đang chạy trong khi t&aacute;c vụ kh&aacute;c được thực thi. V&iacute; dụ: bạn c&oacute; thể nhấp v&agrave;o c&aacute;c n&uacute;t v&agrave; viết v&agrave;o c&aacute;c trường nhập liệu trong khi phản hồi từ m&aacute;y chủ đang truy xuất th&ocirc;ng tin.
<h2 style="text-align: justify;">Promise</h2>
<code>Promise</code> được sử dụng để tạo ra m&atilde; bất đồng bộ. Cơ chế n&agrave;y cho ph&eacute;p gọi h&agrave;m tiếp theo khi c&oacute; vấn đề xảy ra hoặc một promise được xử l&yacute; th&agrave;nh c&ocirc;ng. Trong đoạn code sau, d&ograve;ng 3 n&eacute;m ra một lỗi. Vấn đề ở đ&acirc;y l&agrave; kh&ocirc;ng c&oacute; m&atilde; xử l&yacute; lỗi, v&igrave; vậy n&oacute; sẽ đưa ra một ngoại lệ chưa được xử l&yacute;.
Đoạn code sau thực thi kh&ocirc;ng th&agrave;nh c&ocirc;ng:
<pre class="language-ts" data-content="Promise.resolve(%22value%20to%20be%20in%20the%20argument%20of%20then%22)%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0.then((response%3A%20string)%20%3D%3E%20%7B%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0throw%20new%20Error(%22Error%20message%22)%3B%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>Promise.resolve("value to be in the argument of then")
 .then((response: string) =&gt; {
 throw new Error("Error message");
 });</code></pre>
Ngoại lệ trở n&ecirc;n phức tạp hơn khi kết hợp với kh&aacute;i niệm <code>promise</code>. Do đ&oacute;, ta n&ecirc;n tr&aacute;nh tạo ra ngoại lệ trong m&atilde; bất đồng bộ. Tuy nhi&ecirc;n, ngoại lệ vẫn c&oacute; thể xảy ra. Trong trường hợp đ&oacute;, promise g&acirc;y ra ngoại lệ n&ecirc;n đặt khối <code>catch</code> trực tiếp sau code promise m&agrave; kh&ocirc;ng đ&oacute;ng g&oacute;i n&oacute; trong một c&acirc;u lệnh try-catch.
Trong đoạn code sau, d&ograve;ng 5 bắt một lỗi. N&oacute; lưu lỗi gốc trong biến <code>err</code>.
<pre class="language-ts" data-content="Promise.resolve(%22value%20to%20be%20in%20the%20argument%20of%20then%22)%0A%C2%A0%C2%A0%C2%A0%C2%A0.then((response%3A%20string)%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0throw%20new%20Error(%22Error%20message%22)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D)%0A%C2%A0%C2%A0%C2%A0%C2%A0.catch((err%3A%20Error)%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0console.log(%22Error%20Message%232%22%2C%20err.message)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>Promise.resolve("value to be in the argument of then")
 .then((response: string) =&gt; {
 throw new Error("Error message");
 })
 .catch((err: Error) =&gt; {
 console.log("Error Message#2", err.message);
 });</code></pre>
Promise kh&ocirc;ng hỗ trợ kh&aacute;i niệm <code>finally</code>. Để m&ocirc; phỏng mệnh đề <code>finally</code>, code cần một mệnh đề <code>then</code> sau mệnh đề <code>catch</code>. Trong thuật ngữ bất đồng bộ, <code>finally</code> l&agrave; một đoạn code lu&ocirc;n được thực thi bất kể trạng th&aacute;i thực thi (th&agrave;nh c&ocirc;ng hoặc thất bại). Trong đoạn code sau, d&ograve;ng 14 lu&ocirc;n được gọi. V&iacute; dụ n&eacute;m ra một ngoại lệ. Bạn c&oacute; thể comment d&ograve;ng 3 để thấy rằng d&ograve;ng 14 vẫn được gọi.
<pre class="language-ts" data-content="Promise.resolve(%22value%20to%20be%20in%20the%20argument%20of%20then%22)%0A%C2%A0%C2%A0%C2%A0%C2%A0.then((response%3A%20string)%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0throw%20new%20Error(%22Error%20message%22)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0return%20%22Test%22%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D)%0A%C2%A0%C2%A0%C2%A0%C2%A0.then((response%3A%20string)%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0console.log(%22Second%20then%22%2C%20response)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0return%20Promise.resolve(response)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D)%0A%C2%A0%C2%A0%C2%A0%C2%A0.catch((err%3A%20Error)%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0console.log(%22Error%20Message%232%22%2C%20err.message)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D)%0A%C2%A0%C2%A0%C2%A0%C2%A0.then((response%3A%20string%20%7C%20void)%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0console.log(%22Always%20called%22%2C%20response)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>Promise.resolve("value to be in the argument of then")
 .then((response: string) =&gt; {
 throw new Error("Error message");
 return "Test";
 })
 .then((response: string) =&gt; {
 console.log("Second then", response);
 return Promise.resolve(response);
 })
 .catch((err: Error) =&gt; {
 console.log("Error Message#2", err.message);
 })
 .then((response: string | void) =&gt; {
 console.log("Always called", response);
 });</code></pre>
Trong đoạn code tr&ecirc;n, "Error message" được hiển thị hai lần v&igrave; n&oacute; được ghi v&agrave;o console trong khối <code>catch</code> đầu ti&ecirc;n. Sau đ&oacute;, "Always called" được hiển thị v&igrave; mệnh đề <code>then</code> cuối c&ugrave;ng nằm trong khối <code>finally</code>.
<h2 style="text-align: justify;">Giải ph&aacute;p await/async</h2>
ECMAScript 2017 đ&atilde; giới thiệu h&agrave;m bất đồng bộ để đơn giản h&oacute;a luồng m&atilde; được xử l&yacute; với promise.
Đoạn code sau thay thế việc sử dụng promise trong v&iacute; dụ tr&ecirc;n bằng <code>await</code> v&agrave; <code>async</code> để minh họa c&aacute;ch bắt ngoại lệ.
<pre class="language-ts" data-content="function%20returnPromise()%3A%20Promise%3Cstring%3E%20%7B%0A%C2%A0%C2%A0const%20p%20%3D%20Promise.resolve(%22value%20to%20be%20in%20the%20argument%20of%20then%22)%3B%0A%C2%A0%C2%A0throw%20new%20Error(%22Error%20Message%22)%3B%0A%C2%A0%C2%A0return%20p%3B%0A%7D%0A%0Aasync%20function%20functionHandlePromise()%20%7B%0A%C2%A0%C2%A0try%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0await%20returnPromise()%3B%0A%C2%A0%C2%A0%7D%0A%C2%A0%C2%A0catch%20(err)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0console.log(%22Error%20Message%20%232%22%2C%20err.message)%3B%0A%C2%A0%C2%A0%7D%0A%C2%A0%C2%A0finally%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0console.log(%22Always%20called%22)%3B%0A%C2%A0%C2%A0%7D%0A%7D%0AfunctionHandlePromise()%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>function returnPromise(): Promise&lt;string&gt; {
 const p = Promise.resolve("value to be in the argument of then");
 throw new Error("Error Message");
 return p;
}

async function functionHandlePromise() {
 try {
 await returnPromise();
 }
 catch (err) {
 console.log("Error Message #2", err.message);
 }
 finally {
 console.log("Always called");
 }
}
functionHandlePromise();</code></pre>
C&uacute; ph&aacute;p mới được điều chỉnh để giảm thiểu sự nhầm lẫn khi sử dụng nhiều <code>then</code> v&agrave; <code>catch</code> của promise. Những cơ sở m&atilde; nguồn mới v&agrave; hiện đại hơn sẽ hướng tới việc sử dụng <code>async</code> v&agrave; <code>await</code> như tr&ecirc;n.

Bắt ngoại lệ bất đồng bộ