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 sẽ hướng dẫn c&aacute;ch sử dụng mẫu được xử l&yacute; qua k&yacute; tự v&agrave; t&aacute;i sử dụng n&oacute; để định dạng m&atilde; nguồn.
Chủ đề cuối c&ugrave;ng m&agrave; bạn sẽ t&igrave;m hiểu về TypeScript v&agrave; chuỗi l&agrave; tagged template (mẫu được xử l&yacute; qua k&yacute; tự). Kh&aacute;i niệm n&agrave;y hiếm khi được sử dụng nhưng cung cấp th&ecirc;m một c&aacute;ch định nghĩa h&agrave;m trước khi viết dấu nh&aacute;y ngược mở. Mỗi nh&oacute;m chuỗi v&agrave; c&aacute;c tr&igrave;nh giữ chỗ được định nghĩa bằng k&yacute; hiệu dollar <code>$</code> v&agrave; dấu ngoặc nhọn <code>{}</code>.
Trong trường hợp n&agrave;y, bạn vẫn cung cấp một biểu thức, nhưng bạn c&oacute; thể l&agrave;m cho to&agrave;n bộ chuỗi được xử l&yacute; v&agrave; thay đổi bởi phương thức (tr&igrave;nh giữ chỗ v&agrave; chuỗi trước v&agrave; sau tr&igrave;nh giữ chỗ).
Trong đoạn code dưới đ&acirc;y, d&ograve;ng thứ ba sử dụng nội suy chuỗi nhưng ở phần đầu n&oacute; sử dụng <code>analyzeString</code> l&agrave;m chuỗi mẫu.
Đoạn code dưới đ&acirc;y kh&ocirc;ng bi&ecirc;n dịch được v&igrave; ch&uacute;ng ta chưa định nghĩa mẫu.
<pre class="language-ts" data-content="const%20number%20%3D%2084%3B%0Aconst%20number2%20%3D%20100%3B%0Aconst%20endResult%20%3D%20analyzeString%60The%20number%20is%20%24%7Bnumber%7D%20which%20is%20not%20like%20the%20second%20number%20%24%7Bnumber2%7D%60%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>const number = 84;
const number2 = 100;
const endResult = analyzeString`The number is ${number} which is not like the second number ${number2}`;</code></pre>
H&agrave;m được cung cấp trong mẫu được xử l&yacute; qua k&yacute; tự nhận hai tham số.
Tham số đầu ti&ecirc;n l&agrave; tất cả c&aacute;c chuỗi k&yacute; tự trong mảng v&agrave; tham số thứ hai l&agrave; danh s&aacute;ch tất cả c&aacute;c tr&igrave;nh giữ chỗ.
Chuỗi k&yacute; tự l&agrave; c&aacute;c phần của chuỗi kh&ocirc;ng chứa tr&igrave;nh giữ chỗ. V&iacute; dụ: một c&acirc;u c&oacute; thể chứa một v&agrave;i k&yacute; tự v&agrave; một tr&igrave;nh giữ chỗ theo sau l&agrave; một số k&yacute; tự kh&aacute;c v&agrave; một tr&igrave;nh giữ chỗ kh&aacute;c. Ở đầu chuỗi, bạn chuyển đổi n&oacute; th&agrave;nh mẫu được xử l&yacute; qua k&yacute; tự bằng c&aacute;ch sử dụng tag. Tag l&agrave; một h&agrave;m, trong trường hợp dưới đ&acirc;y, đ&oacute; l&agrave; <code>analyzeString</code>, được đặt trước dấu nh&aacute;y ngược.
Như đ&atilde; đề cập ở tr&ecirc;n, h&agrave;m n&agrave;y c&oacute; hai tham số: tham số đầu ti&ecirc;n l&agrave; một mảng chứa hai mục v&agrave; tham số thứ hai sẽ l&agrave; một mảng chứa c&aacute;c tr&igrave;nh giữ chỗ. Gi&aacute; trị trả về của h&agrave;m phải l&agrave; một chuỗi.
<pre class="language-ts" data-content="function%20analyzeString(literals%3A%20TemplateStringsArray%2C%20...placeholders%3A%20any%5B%5D)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0let%20result%20%3D%20%22%22%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0for%20(let%20i%20%3D%200%3B%20i%20%3C%20placeholders.length%3B%20i%2B%2B)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0result%20%2B%3D%20literals%5Bi%5D%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0result%20%2B%3D%20%22*%22%20%2B%20placeholders%5Bi%5D%20%2B%20%22*%22%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%C2%A0%C2%A0%C2%A0%C2%A0result%20%2B%3D%20literals%5Bliterals.length%20-%201%5D%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20result%3B%0A%7D%0A%0Aconst%20number%20%3D%2084%3B%0Aconst%20number2%20%3D%20100%3B%0Aconst%20endResult%20%3D%20analyzeString%60The%20number%20is%20%24%7Bnumber%7D%20which%20is%20not%20like%20the%20second%20number%20%24%7Bnumber2%7D%60%3B%0A%0Aconsole.log(endResult)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>function analyzeString(literals: TemplateStringsArray, ...placeholders: any[]) {
 let result = "";
 for (let i = 0; i &lt; placeholders.length; i++) {
 result += literals[i];
 result += "*" + placeholders[i] + "*";
 }
 result += literals[literals.length - 1];
 return result;
}

const number = 84;
const number2 = 100;
const endResult = analyzeString`The number is ${number} which is not like the second number ${number2}`;

console.log(endResult);</code></pre>
Đoạn code tr&ecirc;n minh họa hai tham số đ&atilde; thảo luận trước đ&oacute;. <code>literals</code> l&agrave; một danh s&aacute;ch chứa c&aacute;c chuỗi:
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1"><code>"The number is"</code></li>
<li style="font-weight: 400;" aria-level="1">"which is not like the second number"</li>
</ul>
<code>placeholders</code> cũng l&agrave; một danh s&aacute;ch. Trong v&iacute; dụ, n&oacute; chứa hai gi&aacute; trị sau:
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">84</li>
<li style="font-weight: 400;" aria-level="1">100</li>
</ul>
Chuỗi mẫu c&oacute; thể được thay thế bằng h&agrave;m. Lợi &iacute;ch của việc n&agrave;y l&agrave; chuỗi được chia th&agrave;nh c&aacute;c phần ri&ecirc;ng biệt l&agrave; <code>literals</code> (<code>TemplateStringsArray</code>) v&agrave; danh s&aacute;ch <code>placeholders</code> (<code>any</code>). Mẫu được xử l&yacute; qua k&yacute; tự cũng c&oacute; thể trả về một thứ kh&aacute;c ngo&agrave;i chuỗi.

Chuỗi được xử lý qua tag