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

<h2 style="text-align: justify;">Module với default export</h2>
Một kh&iacute;a cạnh quan trọng kh&aacute;c của Module l&agrave; mỗi Module c&oacute; thể c&oacute; một default export v&agrave; default export n&agrave;y l&agrave; duy nhất đối với m&ocirc;-đun cụ thể đ&oacute;. Để định nghĩa một default export, ta viết từ kh&oacute;a default giữa export v&agrave; phần tử cần xuất.
Default export gi&uacute;p đơn giản h&oacute;a qu&aacute; tr&igrave;nh th&ecirc;m bằng c&aacute;ch cho ph&eacute;p truy cập m&agrave; kh&ocirc;ng cần chỉ định một phần tử hoặc tải mọi thứ bằng c&uacute; ph&aacute;p dấu sao. N&oacute;i c&aacute;ch kh&aacute;c, n&oacute; cho ph&eacute;p bạn th&ecirc;m nội dung từ Module m&agrave; kh&ocirc;ng cần sử dụng dấu ngoặc nhọn v&agrave; xuất nội dung từ Module m&agrave; kh&ocirc;ng cần đặt t&ecirc;n cho phần tử đang xuất. Default export thường được sử dụng khi ta cần xuất một phần tử ch&iacute;nh duy nhất từ một Module.
<pre class="language-ts" data-content="%2F%2FOne%20file%20named%20%22module4.ts%22%0Ainterface%20module4Interface%20%7B%20m1%3A%20string%20%7D%0Aexport%20default%20module4Interface%3B%0A%C2%A0%0A%2F%2F%20Another%20file%0Aimport%20Def%20from%20%22.%2Fmodule4%22%3B%0Aconst%20defModule4%3A%20Def%20%3D%20%7B%20m1%3A%20%22A%20string%22%20%7D" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>//One file named "module4.ts"
interface module4Interface { m1: string }
export default module4Interface;
 
// Another file
import Def from "./module4";
const defModule4: Def = { m1: "A string" }</code></pre>
C&acirc;u lệnh export kh&ocirc;ng y&ecirc;u cầu phải xuất một h&agrave;m hoặc biến c&oacute; t&ecirc;n. Nguy&ecirc;n nh&acirc;n l&agrave; v&igrave; khi sử dụng c&acirc;u lệnh import, bạn c&oacute; thể chọn t&ecirc;n hoặc định danh m&agrave; bạn tham chiếu đến phần tử mặc định đ&oacute;.
<pre class="language-ts" data-content="export%20default%20(input%3A%20number)%20%3D%3E%20input%20*%2010%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>export default (input: number) =&gt; input * 10;</code></pre>
<h2 style="text-align: justify;">Tr&aacute;nh sử dụng Module mặc định</h2>
Bạn lu&ocirc;n c&oacute; thể sử dụng Module mặc định trong m&atilde; nguồn nhưng n&ecirc;n sử dụng n&oacute; một c&aacute;ch hạn chế. Mặc d&ugrave; Module mặc định c&oacute; thể gi&uacute;p giảm bớt c&aacute;c d&ograve;ng lệnh li&ecirc;n quan đến việc chỉ định một Module cụ thể từ g&oacute;i nhưng n&oacute; khiến việc t&aacute;i cấu tr&uacute;c m&atilde; nguồn trở n&ecirc;n kh&oacute; khăn hơn. L&yacute; do l&agrave; c&aacute;c phần chương tr&igrave;nh sử dụng Module c&oacute; default export c&oacute; thể tham chiếu đến Module với c&aacute;c t&ecirc;n kh&aacute;c nhau.
Trong v&iacute; dụ sau, d&ograve;ng 5 v&agrave; 8 th&ecirc;m c&ugrave;ng một h&agrave;m nhưng g&aacute;n hai t&ecirc;n kh&aacute;c nhau. Việc t&aacute;i cấu tr&uacute;c ABC kh&ocirc;ng sẽ tự động t&aacute;i cấu tr&uacute;c XYZ. Kh&ocirc;ng sử dụng default export gi&uacute;p tăng t&iacute;nh nhất qu&aacute;n trong cơ sở m&atilde;.
<pre class="language-ts" data-content="%2F%2F%20Module1.ts%0Aexport%20default%20function%20()%20%7Bconsole.log(%22function%22)%3B%7D%0A%2F%2F%20Import%20in%20file1.ts%0Aimport%20nameABC%20from%20%22.%2FModule1%22%0A%2F%2F%20Import%20in%20file1.ts%0Aimport%20nameXYZ%20from%20%22.%2FModule1%22" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>// Module1.ts
export default function () {console.log("function");}
// Import in file1.ts
import nameABC from "./Module1"
// Import in file1.ts
import nameXYZ from "./Module1"</code></pre>
Nếu bạn sử dụng Module mặc định trong ph&aacute;t triển web, bạn sẽ kh&ocirc;ng thể tối ưu h&oacute;a k&iacute;ch thước với kỹ thuật tree shaking (loại bỏ code chết) v&igrave; Module mặc định c&oacute; thể tải nhiều code hơn cần thiết.
H&atilde;y cẩn trọng khi sử dụng default export!