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, ch&uacute;ng ta sẽ đi s&acirc;u t&igrave;m hiểu c&aacute;ch định nghĩa số nguy&ecirc;n, số thực v&agrave; double trong TypeScript.
Một kiểu dữ liệu nguy&ecirc;n thủy phổ biến l&agrave; số. V&igrave; TypeScript l&agrave; tập hợp si&ecirc;u (phi&ecirc;n bản mở rộng) của JavaScript n&ecirc;n c&aacute;ch thức hoạt động của số học l&agrave; như nhau trong cả hai ng&ocirc;n ngữ. T&iacute;nh linh hoạt của JavaScript cho ph&eacute;p ta sử dụng một tập hợp đa dạng c&aacute;c kiểu dữ liệu số học. Do đ&oacute;, bạn c&oacute; thể sử dụng c&aacute;c kiểu như số nguy&ecirc;n, số thực c&oacute; dấu hoặc số thực kh&ocirc;ng dấu. Theo mặc định, số sẽ được hiểu l&agrave; hệ đếm cơ số 10.
Khi biến được g&aacute;n một kiểu r&otilde; r&agrave;ng, kiểu sẽ bị loại bỏ sau khi code JavaScript được tạo ra từ TypeScript. L&yacute; do l&agrave; v&igrave; định kiểu kh&ocirc;ng tồn tại trong JavaScript. Điều n&agrave;y giải th&iacute;ch nguy&ecirc;n nh&acirc;n tại sao TypeScript chỉ c&oacute; kiểu <code>number</code>. Đoạn code sau sẽ tạo ra ba biến m&agrave; kh&ocirc;ng c&oacute; kiểu r&otilde; r&agrave;ng trong JavaScript, nhưng nếu <code>typeof</code> được sử dụng, code sẽ trả về kiểu động: <code>number</code>.
<pre class="language-ts" data-content="const%20x%3A%20number%20%3D%2010%3B%0Alet%20z%3A%20number%20%3D%2015%3B%0Avar%20p%3A%20number%20%3D%20123%3B%0Aconsole.log(%22Here%20are%203%20variables%20of%20type%20number%22%2C%20x%2C%20z%2C%20p)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>const x: number = 10;
let z: number = 15;
var p: number = 123;
console.log("Here are 3 variables of type number", x, z, p);</code></pre>
<h2 style="text-align: justify;">Cơ số</h2>
Bạn cũng c&oacute; thể g&aacute;n hệ đếm cơ số 16 (hệ thập lục ph&acirc;n), cơ số 8 (hệ b&aacute;t ph&acirc;n) hoặc cơ số 2 (hệ nhị ph&acirc;n) bằng c&aacute;ch sử dụng c&aacute;c tiền tố <code>0x</code>, <code>0o</code> v&agrave; <code>0b</code>, tuy nhi&ecirc;n ch&uacute;ng rất hiếm khi được sử dụng:
<pre class="language-ts" data-content="let%20dec%3A%20number%20%3D%2010%3B%0Alet%20hex%3A%20number%20%3D%200x10%3B%0Alet%20octo%3A%20number%20%3D%200o10%3B%0Alet%20bin%3A%20number%20%3D%200b10%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>let dec: number = 10;
let hex: number = 0x10;
let octo: number = 0o10;
let bin: number = 0b10;
console.log("Here are 4 numbers", dec, hex, octo, bin);</code></pre>
Phần lớn c&aacute;c biến được sử dụng trong TypeScript kh&ocirc;ng cần phải chỉ định r&otilde; kiểu tại thời điểm khai b&aacute;o. TypeScript c&oacute; thể tự động suy luận kiểu. Đoạn code sau đ&acirc;y giống như đoạn code ở tr&ecirc;n. Nếu bạn di con trỏ chuột l&ecirc;n biến, bạn sẽ thấy th&ocirc;ng tin kiểu của biến l&agrave; <code>number</code>.
<pre class="language-ts" data-content="let%20dec2%20%3D%2010%3B%0Alet%20hex2%20%3D%200x10%3B%0Alet%20octo2%20%3D%200o10%3B%0Alet%20bin2%20%3D%200b10%3B%0Aconsole.log(%22Here%20is%204%20numbers%22%2C%20dec2%2Chex2%2Cocto2%2Cbin2)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>let dec2 = 10;
let hex2 = 0x10;
let octo2 = 0o10;
let bin2 = 0b10;
console.log("Here is 4 numbers", dec2,hex2,octo2,bin2);</code></pre>
Tuy nhi&ecirc;n, đoạn code sau đ&acirc;y kh&ocirc;ng khai b&aacute;o 4 biến l&agrave; kiểu <code>number</code>.
<pre class="language-ts" data-content="const%20dec2%20%3D%2010%3B%0Aconst%20hex2%20%3D%200x10%3B%0Aconst%20octo2%20%3D%200o10%3B%0Aconst%20bin2%20%3D%200b10%3B%0Aconsole.log(%22Here%20is%204%20numbers%22%2C%20dec2%2Chex2%2Cocto2%2Cbin2)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>const dec2 = 10;
const hex2 = 0x10;
const octo2 = 0o10;
const bin2 = 0b10;
console.log("Here is 4 numbers", dec2,hex2,octo2,bin2);</code></pre>
Đoạn code c&oacute; thể bi&ecirc;n dịch được, nhưng nếu bạn di con trỏ chuột l&ecirc;n mỗi biến, bạn sẽ thấy hiển thị kiểu l&agrave; <code>10</code>, <code>16</code>, <code>8</code> v&agrave; <code>2</code>. Kiểu thực tế ch&iacute;nh l&agrave; gi&aacute; trị của biến, c&oacute; nghĩa l&agrave; chỉ c&aacute;c gi&aacute; trị đ&oacute; mới l&agrave; kiểu m&agrave; TypeScript chấp nhận. Sự kh&aacute;c biệt giữa đoạn code n&agrave;y v&agrave; đoạn code trước l&agrave; <code>let</code> v&agrave; <code>const</code>. Với <code>let</code>, biến c&oacute; thể được g&aacute;n lại bất kỳ l&uacute;c n&agrave;o trong suốt v&ograve;ng đời của biến, do đ&oacute; kiểu chung chung nhất m&agrave; TypeScript c&oacute; thể suy luận l&agrave; <code>number</code>.
Tuy nhi&ecirc;n, trong v&iacute; dụ cuối c&ugrave;ng với <code>const</code>, TypeScript biết rằng gi&aacute; trị sẽ kh&ocirc;ng thay đổi, v&igrave; vậy n&oacute; thu hẹp kiểu dữ liệu xuống th&agrave;nh gi&aacute; trị duy nhất m&agrave; biến c&oacute; thể nhận.
<h2 style="text-align: justify;">C&aacute;c kiểu number: số nguy&ecirc;n, số thập ph&acirc;n v&agrave; số c&oacute; dấu</h2>
Kiểu <code>number</code> trong TypeScript giống hệt kiểu số trong JavaScript: bao gồm c&aacute;c kiểu số nguy&ecirc;n, số thực, số dấu phẩy động độ ch&iacute;nh x&aacute;c k&eacute;p, v.v. V&igrave; vậy, số nguy&ecirc;n, số thực v&agrave; số dương hoặc số &acirc;m đều thuộc c&ugrave;ng một kiểu l&agrave; <code>number</code>. Kiểu đ&atilde; được khai b&aacute;o l&agrave; <code>number</code> (ngầm định hoặc tường minh) c&oacute; thể được kiểm tra tại thời điểm chạy bằng <code>typeof</code>, n&oacute; sẽ trả về <code>number</code>.
C&aacute;c số trong TypeScript cũng kh&ocirc;ng c&oacute; dấu. Điều n&agrave;y c&oacute; nghĩa l&agrave; ch&uacute;ng c&oacute; thể l&agrave; số dương hoặc &acirc;m.
<pre class="language-ts" data-content="let%20int%3A%20number%20%3D%201%3B%0A%0Alet%20float%3A%20number%20%3D%201.1%3B%0A%0Alet%20negative%3A%20number%20%3D%20-100%3B%0A%0Aconsole.log(typeof(int))%3B%0A%0Aconsole.log(typeof(float))%3B%0A%0Aconsole.log(typeof(negative))%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>let int: number = 1;
let float: number = 1.1;
let negative: number = -100;
console.log(typeof(int));
console.log(typeof(float));
console.log(typeof(negative));</code></pre>
<h2 style="text-align: justify;">Not a Number (NaN)</h2>
Giống như trong JavaScript, kiểu <code>number</code> trong TypeScript c&oacute; thể được g&aacute;n gi&aacute; trị <code>NaN</code>, c&oacute; nghĩa l&agrave; Not a Number (kh&ocirc;ng phải l&agrave; số).
<pre class="language-ts" data-content="let%20myNumberIsNotANumber%3A%20number%20%3D%20NaN%3B%0Aconsole.log(myNumberIsNotANumber)%3B%0Aconsole.log(typeof(myNumberIsNotANumber))%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>let myNumberIsNotANumber: number = NaN;
console.log(myNumberIsNotANumber);
console.log(typeof(myNumberIsNotANumber));</code></pre>
<h2 style="text-align: justify;">Dấu ph&acirc;n c&aacute;ch</h2>
Dấu ph&acirc;n c&aacute;ch số l&agrave; một t&iacute;nh năng gi&uacute;p đơn giản h&oacute;a c&aacute;ch ch&uacute;ng ta viết số. C&aacute;c số lớn thường kh&aacute; kh&oacute; đọc v&agrave; việc sử dụng dấu ph&acirc;n c&aacute;ch c&oacute; thể gi&uacute;p ta tr&aacute;nh gặp nhầm lẫn. V&iacute; dụ: bạn c&oacute; thể sử dụng k&yacute; hiệu gạch dưới để đ&aacute;nh dấu mỗi h&agrave;ng ngh&igrave;n. TypeScript kh&ocirc;ng đưa ra bất kỳ quy tắc n&agrave;o về vị tr&iacute; đặt dấu ph&acirc;n c&aacute;ch số, ngoại trừ việc bạn phải đặt dấu ph&acirc;n c&aacute;ch giữa hai số ri&ecirc;ng biệt.
<pre class="language-ts" data-content="const%20numericSeparator1%20%3D%20560000067%3B%0Aconst%20numericSeparator2%20%3D%20560_000_067%3B%0Aconst%20numericSeparator3%20%3D%205_6_0_000_0_6_7%3B%0Aconst%20numericSeparator4%20%3D%20Number(5_000)%3B%0Aconst%20numericSeparator5%20%3D%20Number(%225_000%22)%3B%20%2F%2F%20Nan%0Aconst%20numericSeparator6%20%3D%20parseInt(%225_000%22)%3B%C2%A0%C2%A0%0Aconst%20numericSeparator7%20%3D%C2%A0%200xFAB_F00D%3B%0Aconst%20numericSeparator8%20%3D%C2%A0%200b1111_11111000_11110000_00001100%3B%0Aconsole.log(numericSeparator1)%0Aconsole.log(numericSeparator2)%0Aconsole.log(numericSeparator3)%0Aconsole.log(numericSeparator4)%0Aconsole.log(numericSeparator5)%0Aconsole.log(numericSeparator6)%0Aconsole.log(numericSeparator7)%0Aconsole.log(numericSeparator8)" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>const numericSeparator1 = 560000067;
const numericSeparator2 = 560_000_067;
const numericSeparator3 = 5_6_0_000_0_6_7;
const numericSeparator4 = Number(5_000);
const numericSeparator5 = Number("5_000"); // Nan
const numericSeparator6 = parseInt("5_000"); 
const numericSeparator7 = 0xFAB_F00D;
const numericSeparator8 = 0b1111_11111000_11110000_00001100;
console.log(numericSeparator1)
console.log(numericSeparator2)
console.log(numericSeparator3)
console.log(numericSeparator4)
console.log(numericSeparator5)
console.log(numericSeparator6)
console.log(numericSeparator7)
console.log(numericSeparator8)</code></pre>
Khi sử dụng <code>NaN</code>, JavaScript kh&ocirc;ng thể biến một chuỗi c&oacute; dấu ph&acirc;n c&aacute;ch th&agrave;nh một số hợp lệ. TypeScript kh&ocirc;ng đưa ra cảnh b&aacute;o hoặc b&aacute;o lỗi trong bước chuyển đổi m&atilde; nguồn v&igrave; n&oacute; chỉ kiểm tra xem kiểu c&oacute; l&agrave; <code>string</code> hay kh&ocirc;ng, đ&acirc;y l&agrave; một thao t&aacute;c hợp lệ trong TypeScript, nhưng kh&ocirc;ng đ&aacute;nh gi&aacute; từng ph&eacute;p to&aacute;n cụ thể.
Dấu ph&acirc;n c&aacute;ch số hoạt động với c&aacute;c hệ thập ph&acirc;n, b&aacute;t ph&acirc;n, nhị ph&acirc;n v&agrave; thập lục ph&acirc;n. N&oacute; được hỗ trợ kể từ TypeScript 2.7 v&agrave; hiện c&oacute; trong phi&ecirc;n bản mới nhất của ECMAScript. Bạn c&oacute; thể sử dụng t&iacute;nh năng n&agrave;y trong c&aacute;c phi&ecirc;n bản cũ hơn của ECMAScript v&igrave; TypeScript sẽ tự động x&oacute;a dấu ph&acirc;n c&aacute;ch trong qu&aacute; tr&igrave;nh chuyển đổi m&atilde; nguồn v&agrave; bạn c&oacute; thể sử dụng t&iacute;nh năng n&agrave;y trong c&aacute;c phi&ecirc;n bản cũ hơn của ECMAScript.

Kiểu dữ liệu số trong TypeScript