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;ch khai b&aacute;o một biến chứa gi&aacute; trị true hoặc false.
<h2 style="text-align: justify;">Kiểu nguy&ecirc;n thủy boolean&nbsp;</h2>
Kiểu boolean l&agrave; kiểu nguy&ecirc;n thủy cơ bản nhất trong JavaScript v&agrave; trong TypeScript, boolean vẫn giữ nguy&ecirc;n c&aacute;ch thức hoạt động giống như trong JavaScript. Kiểu boolean chỉ nhận một trong hai gi&aacute; trị: <code>true</code> v&agrave; <code>false</code>. Hai gi&aacute; trị n&agrave;y ph&acirc;n biệt chữ hoa chữ thường - chỉ định định dạng chữ thường l&agrave; được chấp nhận.
<pre class="language-ts" data-content="let%20b%3A%20boolean%20%3D%20true%3B%0A%0Aconsole.log(b)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>let b: boolean = true;
console.log(b);</code></pre>
Bạn kh&ocirc;ng thể g&aacute;n gi&aacute; trị <code>0</code> hoặc <code>1</code> hoặc gi&aacute; trị <code>true</code> hoặc <code>false</code> viết hoa.
[___NOTE_Sau đ&acirc;y l&agrave; hai trường hợp m&agrave; TypeScript sẽ kh&ocirc;ng cho ph&eacute;p chương tr&igrave;nh bi&ecirc;n dịch._NOTE___]
<pre class="language-ts" data-content="let%20bWithUumber%3A%20boolean%20%3D%200%3B%0Alet%20bWithUpperCase%3A%20boolean%20%3D%20TRUE%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>let bWithUumber: boolean = 0;
let bWithUpperCase: boolean = TRUE;</code></pre>
Bạn c&oacute; thể đảo ngược gi&aacute; trị boolean bằng c&aacute;ch th&ecirc;m dấu chấm than trước gi&aacute; trị.
<pre class="language-ts" data-content="let%20myValueCanChange%3A%20boolean%20%3D%20true%3B%0Aconsole.log(myValueCanChange)%3B%0AmyValueCanChange%20%3D%20!myValueCanChange%3B%0Aconsole.log(myValueCanChange)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>let myValueCanChange: boolean = true;
console.log(myValueCanChange);
myValueCanChange = !myValueCanChange;
console.log(myValueCanChange);</code></pre>
Gi&aacute; trị boolean thường l&agrave; kết quả của c&aacute;c ph&eacute;p to&aacute;n như <code>===</code>&nbsp;hoặc <code>&lt;</code>, <code>&gt;</code>, <code>!==</code>, <code>&lt;=</code>, <code>&gt;=</code>.
<pre class="language-ts" data-content="let%20number1%20%3D%205%3B%0Alet%20number2%20%3D%205%3B%0Alet%20number3%20%3D%20100%3B%0Alet%20biggerThan%3A%20boolean%20%3D%20number1%20%3E%20number3%3B%0Aconsole.log(biggerThan)%3B%20%2F%2F%20False%0A%0Alet%20smallerThan%3A%20boolean%20%3D%20number1%20%3C%20number3%3B%0Aconsole.log(smallerThan)%3B%20%2F%2F%20True%0A%0Alet%20biggerOrEqualThan%3A%20boolean%20%3D%20number1%20%3C%3D%20number2%3B%0Aconsole.log(biggerOrEqualThan)%3B%20%2F%2F%20True%0A%0Alet%20beEqual%3A%20boolean%20%3D%20number3%20%3D%3D%3D%20number3%3B%0Aconsole.log(beEqual)%3B%20%2F%2F%20True%0A%0Alet%20notBeEqual%3A%20boolean%20%3D%20number1%20!%3D%3D%20number3%3B%0Aconsole.log(notBeEqual)%3B%20%2F%2F%20True" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>let number1 = 5;
let number2 = 5;
let number3 = 100;
let biggerThan: boolean = number1 &gt; number3;
console.log(biggerThan); // False

let smallerThan: boolean = number1 &lt; number3;
console.log(smallerThan); // True

let biggerOrEqualThan: boolean = number1 &lt;= number2;
console.log(biggerOrEqualThan); // True

let beEqual: boolean = number3 === number3;
console.log(beEqual); // True

let notBeEqual: boolean = number1 !== number3;
console.log(notBeEqual); // True</code></pre>
TypeScript cho ph&eacute;p c&aacute;c kiểu gi&aacute; trị kh&aacute;c được xử l&yacute; tương tự như gi&aacute; trị boolean. V&iacute; dụ: gi&aacute; trị <code>undefined</code> v&agrave; <code>null</code>, <code>-0</code>, <code>0</code> v&agrave; <code>NaN</code> sẽ trả về gi&aacute; trị <code>false</code>. Điều n&agrave;y l&agrave; do trong JavaScript c&oacute; nhiều gi&aacute; trị được coi l&agrave; "falsy".
<pre class="language-ts" data-content="let%20x1%20%3D%20undefined%3B%0Alet%20x2%20%3D%20null%3B%0Alet%20x3%20%3D%20-0%3B%0Alet%20x4%20%3D%200%3B%0Alet%20x5%20%3D%20NaN%3B%0Alet%20x6%20%3D%20%7B%7D%3B%0Alet%20x7%3A%20any%5B%5D%20%3D%20%5B%5D%3B%0A%0Afunction%20printTrueOrFalse(b%3A%20any%20%7C%20any%5B%5D)%3A%20void%7B%0A%C2%A0%C2%A0if(b)%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0console.log(%60The%20value%20%24%7Bb%7D%20is%20true%60)%3B%0A%C2%A0%C2%A0%7D%20else%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0console.log(%60The%20value%20%24%7Bb%7D%20is%20false%60)%3B%0A%C2%A0%C2%A0%7D%0A%7D%0AprintTrueOrFalse(x1)%3B%0AprintTrueOrFalse(x2)%3B%0AprintTrueOrFalse(x3)%3B%0AprintTrueOrFalse(x4)%3B%0AprintTrueOrFalse(x5)%3B%0AprintTrueOrFalse(x6)%3B%0AprintTrueOrFalse(x7)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>let x1 = undefined;
let x2 = null;
let x3 = -0;
let x4 = 0;
let x5 = NaN;
let x6 = {};
let x7: any[] = [];

function printTrueOrFalse(b: any | any[]): void{
 if(b){
 console.log(`The value ${b} is true`);
 } else{
 console.log(`The value ${b} is false`);
 }
}
printTrueOrFalse(x1);
printTrueOrFalse(x2);
printTrueOrFalse(x3);
printTrueOrFalse(x4);
printTrueOrFalse(x5);
printTrueOrFalse(x6);
printTrueOrFalse(x7);</code></pre>
V&iacute; dụ trước đ&oacute; in ra "is false" cho mỗi cuộc gọi h&agrave;m, ngoại trừ hai cuộc gọi cuối c&ugrave;ng.
Một chi tiết cần lưu &yacute; l&agrave; tham số của h&agrave;m c&oacute; kiểu <code>any</code>. Nếu bạn thay đổi kiểu th&agrave;nh <code>boolean</code>, chương tr&igrave;nh sẽ kh&ocirc;ng bi&ecirc;n dịch được. Hai phần tử cuối c&ugrave;ng l&agrave; true v&igrave; một đối tượng hay mảng rỗng vẫn được coi l&agrave; đối tượng hoặc mảng.
<h2 style="text-align: justify;">H&agrave;m Boolean</h2>
TypeScript, giống như JavaScript, cho ph&eacute;p bạn gọi h&agrave;m <code>Boolean</code>. H&agrave;m n&agrave;y được d&ugrave;ng để chuyển đổi c&aacute;c kiểu dữ liệu th&agrave;nh kiểu boolean.
TypeScript tu&acirc;n theo c&aacute;c quy tắc của JavaScript, do đ&oacute; một số gi&aacute; trị c&oacute; thể trả về kết quả bất ngờ. V&iacute; dụ: <code>Boolean("false")</code>&nbsp;sẽ trả về <code>true</code> v&agrave; <code>Boolean("not false")</code>&nbsp;sẽ trả về <code>true;</code>.
<pre class="language-ts" data-content="console.log(Boolean(false))%3B%20%2F%2F%20False%0Aconsole.log(Boolean(%22false%22))%3B%20%2F%2F%20True%0Aconsole.log(Boolean(%22not%20false%22))%3B%20%2F%2F%20True" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>console.log(Boolean(false)); // False
console.log(Boolean("false")); // True
console.log(Boolean("not false")); // True</code></pre>
H&atilde;y nhớ rằng h&agrave;m <code>Boolean</code> đang nhận kiểu <code>unknown</code>, ch&uacute;ng ta sẽ thấy điều n&agrave;y trong một v&agrave;i b&agrave;i học tiếp theo.
<h2 style="text-align: justify;">Đối tượng boolean</h2>
Đối tượng boolean hoạt động giống như h&agrave;m boolean. Điểm kh&aacute;c biệt l&agrave; kết quả kh&ocirc;ng phải l&agrave; gi&aacute; trị <code>boolean</code> m&agrave; l&agrave; một đối tượng bao quanh gi&aacute; trị boolean. Kết quả của đoạn code sau l&agrave; c&aacute;c đối tượng như <code>[Boolean: false]</code> thay v&igrave; gi&aacute; trị nguy&ecirc;n thủy l&agrave; <code>false</code>.
<pre class="language-ts" data-content="console.log(new%20Boolean(false))%3B%20%2F%2F%20False%0Aconsole.log(new%20Boolean(%22false%22))%3B%20%2F%2F%20True%0Aconsole.log(new%20Boolean(%22not%20false%22))%3B%20%2F%2F%20True" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>console.log(new Boolean(false)); // False
console.log(new Boolean("false")); // True
console.log(new Boolean("not false")); // True</code></pre>

Boolean, hàm và đối tượng