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;c vị tr&iacute; m&agrave; bạn c&oacute; thể t&igrave;m kiếm file định nghĩa.
Bạn c&oacute; thể lấy file định nghĩa từ hai nơi kh&aacute;c nhau.
<h2 style="text-align: justify;">Lấy file định nghĩa trực tiếp từ thư viện JavaScript</h2>
C&aacute;ch thứ nhất, hiện đang phổ biến gần đ&acirc;y, l&agrave; lấy trực tiếp từ thư viện JavaScript khi bạn đang c&agrave;i đặt thư viện th&ocirc;ng qua NPM. Nếu bạn xem g&oacute;i đ&atilde; tải xuống, bạn sẽ thấy file index.d.ts trong thư mục của thư viện. Nếu thấy file, điều đ&oacute; c&oacute; nghĩa l&agrave; t&aacute;c giả của thư viện JavaScript đ&atilde; cung cấp file định nghĩa. Thư viện chứa sẵn file định nghĩa được coi l&agrave; trường hợp l&yacute; tưởng nhất v&igrave; n&oacute; đảm bảo file định nghĩa lu&ocirc;n được đồng bộ v&agrave; cập nhật theo m&atilde; nguồn của thư viện.
C&aacute;ch thứ hai l&agrave; sử dụng NPM với c&uacute; ph&aacute;p @types/X, trong đ&oacute; X l&agrave; t&ecirc;n của thư viện cần lấy file định nghĩa. G&oacute;i NPM kh&ocirc;ng khả dụng với mọi thư viện, nhưng h&agrave;ng ng&agrave;n thư viện đ&atilde; được tạo một g&oacute;i ri&ecirc;ng để chứa c&aacute;c file định nghĩa kiểu. M&atilde; nguồn cho c&aacute;c file định nghĩa được lấy từ GitHub, trong kho lưu trữ DefinitelyTyped. Kho lưu trữ chứa một bộ sưu tập c&aacute;c file định nghĩa cho tất cả c&aacute;c thư viện v&agrave; những người đ&oacute;ng g&oacute;p l&agrave; những người giữ cho c&aacute;c file n&agrave;y lu&ocirc;n được cập nhật v&agrave; đồng bộ. File định nghĩa được c&agrave;i đặt trong thư mục node_modules, trong thư mục con @types, b&ecirc;n trong thư mục của thư viện m&agrave; bạn y&ecirc;u cầu. Tr&igrave;nh bi&ecirc;n dịch TypeScript biết c&aacute;ch t&igrave;m kiếm c&aacute;c file trong thư mục n&agrave;y. Ta cũng c&oacute; thể thay đổi vị tr&iacute; cũng trong file cấu h&igrave;nh tr&igrave;nh bi&ecirc;n dịch.
<h2 style="text-align: justify;">Tạo file định nghĩa</h2>
T&aacute;c giả của một thư viện JavaScript muốn cung cấp kiểu cho những người d&ugrave;ng TypeScript cần viết file định nghĩa. File n&agrave;y kh&ocirc;ng thể được tạo tự động v&agrave; qu&aacute; tr&igrave;nh thiết lập c&oacute; thể mất kh&aacute; nhiều thời gian, nhất l&agrave; đối với c&aacute;c thư viện lớn. Tuy nhi&ecirc;n, nếu bạn đang viết code bằng TypeScript, bạn c&oacute; thể tạo file định nghĩa trực tiếp khi bi&ecirc;n dịch bằng c&aacute;ch thiết lập t&ugrave;y chọn declaration th&agrave;nh true. Bằng c&aacute;ch n&agrave;y, bạn sẽ c&oacute; một file định nghĩa ho&agrave;n chỉnh chứa th&ocirc;ng tin kiểu được tạo tự động cho dự &aacute;n. Sử dụng tr&igrave;nh bi&ecirc;n dịch l&agrave; c&aacute;ch nhanh nhất v&igrave; TypeScript biết th&ocirc;ng tin kiểu của dự &aacute;n trong qu&aacute; tr&igrave;nh bi&ecirc;n dịch, tất cả th&ocirc;ng tin n&agrave;y được sử dụng để tạo ra file định nghĩa. File định nghĩa được tạo ra sau đ&oacute; c&oacute; thể được sao ch&eacute;p v&agrave; đ&oacute;ng g&oacute;i c&ugrave;ng với JavaScript khi xuất bản g&oacute;i.
<h2 style="text-align: justify;">Trường hợp kh&ocirc;ng c&oacute; file định nghĩa c&oacute; sẵn</h2>
Nếu kh&ocirc;ng c&oacute; file định nghĩa c&oacute; sẵn v&agrave; bạn kh&ocirc;ng muốn tạo một file định nghĩa, bạn cần tạo một file định nghĩa giả. File n&agrave;y cho ph&eacute;p bạn sử dụng file JavaScript đ&atilde; th&ecirc;m, nhưng kh&ocirc;ng cung cấp bất kỳ th&ocirc;ng tin kiểu n&agrave;o. Để TypeScript c&oacute; thể nhận biết v&agrave; sử dụng file giả n&agrave;y, bạn cần chỉ định vị tr&iacute; của thư mục chứa n&oacute; trong file cấu h&igrave;nh. V&iacute; dụ sau lấy file pad của thư viện bằng NPM. Giả định rằng kh&ocirc;ng c&oacute; file định nghĩa c&oacute; sẵn. Bước đầu ti&ecirc;n l&agrave; tạo một thư mục c&oacute; t&ecirc;n l&agrave; pad trong thư mục @types v&agrave; sau đ&oacute; tạo một file c&oacute; t&ecirc;n l&agrave; index.d.ts.
<pre class="language-ts" data-content="declare%20module%20%22pad%22%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>declare module "pad";</code></pre>
D&ograve;ng lệnh tr&ecirc;n th&ecirc;m một thư viện v&agrave; thực thi n&oacute;. Tuy nhi&ecirc;n, n&oacute; kh&ocirc;ng được cung cấp t&iacute;nh năng Intellisense hoặc bảo vệ kiểu v&igrave; file định nghĩa chỉ x&aacute;c định rằng pad l&agrave; một m&ocirc;-đun.
<pre class="language-ts" data-content="import%20*%20as%20pad%20from%20%22pad%22%3B%0Aconsole.log(pad(%22Test%22%2C%2025%2C%20'%2B'))%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>import * as pad from "pad";
console.log(pad("Test", 25, '+'));</code></pre>
Cuối c&ugrave;ng, TypeScript cần phải biết vị tr&iacute; của c&aacute;c file định nghĩa. File cấu h&igrave;nh cho ph&eacute;p bạn th&ecirc;m đường dẫn cho file định nghĩa giống như c&aacute;c file TypeScript th&ocirc;ng thường. Ngo&agrave;i ra, TypeScript sẽ kiểm tra thư mục @types.
<pre class="language-ts" data-content="%22include%22%3A%20%5B%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%0A%C2%A0%C2%A0%22src%2F**%2F*.ts%22%2C%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%0A%C2%A0%C2%A0%22%40types%2F**%2F*.d.ts%22%C2%A0%C2%A0%C2%A0%C2%A0%0A%5D" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>"include": [ 
 "src/**/*.ts", 
 "@types/**/*.d.ts" 
]</code></pre>

Vị trí file định nghĩa