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, ta sẽ học c&aacute;ch ph&acirc;n biệt giữa object v&agrave; Object.
<h2 style="text-align: justify;">object viết thường</h2>
TypeScript 2.2 mang đến hỗ trợ cho loại <code>object</code> viết thường. <code>object</code> bao gồm tất cả c&aacute;c kiểu dữ liệu kh&ocirc;ng phải l&agrave; kiểu nguy&ecirc;n thủy. Loại n&agrave;y thường bị nhầm lẫn với <code>Object</code> viết hoa v&igrave; cả hai đều li&ecirc;n quan đến đối tượng. Dưới đ&acirc;y l&agrave; danh s&aacute;ch c&aacute;c kiểu dữ liệu kh&ocirc;ng phải l&agrave; đối tượng:
<ol style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">undefined</li>
<li style="font-weight: 400;" aria-level="1">null</li>
<li style="font-weight: 400;" aria-level="1">number</li>
<li style="font-weight: 400;" aria-level="1">string</li>
<li style="font-weight: 400;" aria-level="1">Boolean</li>
<li style="font-weight: 400;" aria-level="1">symbol</li>
</ol>
<pre class="language-ts" data-content="let%20o%3A%20object%3B%0Ao%20%3D%201%3B%20%2F%2F%20Primitive%20%3D%20does%20not%20work%0Ao%20%3D%20%7B%20a%3A%20%22123%22%20%7D%3B%20%2F%2F%20Anonymous%20object%20%3D%20work%0Ainterface%20MySchema%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0val%3A%20string%3B%0A%7D%0Alet%20interfaceObject%3A%20MySchema%20%3D%20%7B%20val%3A%20%22Test%22%20%7D%3B%0Ao%20%3D%20interfaceObject%3B%20%2F%2F%20Typed%20object%20%3D%20work%0Ao%20%3D%20null%3B%20%2F%2F%20Does%20not%20work%0Ao%20%3D%20undefined%3B%20%2F%2F%20Does%20not%20work%0Alet%20x%20%3D%20new%20Array()%3B%0Ao%20%3D%20x%3B%20%2F%2F%20%22new%22%20object%20%3D%20work" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>let o: object;
o = 1; // Primitive = does not work
o = { a: "123" }; // Anonymous object = work
interface MySchema {
 val: string;
}
let interfaceObject: MySchema = { val: "Test" };
o = interfaceObject; // Typed object = work
o = null; // Does not work
o = undefined; // Does not work
let x = new Array();
o = x; // "new" object = work</code></pre>
Một số v&iacute; dụ trong đ&oacute; m&atilde; nguồn được chuyển đổi th&agrave;nh c&ocirc;ng v&agrave; chuyển đổi thất bại&nbsp;
Đoạn code tr&ecirc;n định nghĩa một biến duy nhất <code>o</code> c&oacute; kiểu <code>object</code>. C&oacute; nhiều ph&eacute;p g&aacute;n kh&aacute;c nhau được thực hiện trong đoạn code, bắt đầu từ <code>number</code> tr&ecirc;n d&ograve;ng 2 bi&ecirc;n dịch thất bại đến một đối tượng dấu ngoặc nhọn bi&ecirc;n dịch th&agrave;nh c&ocirc;ng. Theo d&otilde;i đoạn code v&agrave; kiểm tra comment để xem th&ecirc;m c&aacute;c v&iacute; dụ chuyển đổi m&atilde; nguồn th&agrave;nh c&ocirc;ng hoặc thất bại cho c&aacute;c kiểu dữ liệu.
<h2 style="text-align: justify;">Object viết hoa</h2>
<code>Object</code> l&agrave; một kiểu dữ liệu trong JavaScript cung cấp c&aacute;c h&agrave;m cơ bản như <code>toString</code>, <code>hasOwnProperty</code>, v.v. C&aacute;c h&agrave;m n&agrave;y c&oacute; thể được truy cập th&ocirc;ng qua chuỗi nguy&ecirc;n mẫu nếu bạn sử dụng dấu ngoặc nhọn để tạo ra một đối tượng rỗng. <code>Object</code> hiếm khi được sử dụng trực tiếp. Tuy nhi&ecirc;n, khi bạn tạo một thực thể của lớp, n&oacute; gọi một <code>Object</code> mới.
<pre class="language-ts" data-content="%C2%A0%C2%A0%C2%A0%C2%A0let%20x%20%3D%20%7B%20y%3A%201%20%7D%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0let%20obj%3A%20Object%20%3D%20x%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0console.log(obj.toString())%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code> let x = { y: 1 };
 let obj: Object = x;
 console.log(obj.toString());</code></pre>
Việc lựa chọn giữa <code>object</code> v&agrave; <code>Object</code> c&oacute; thể g&acirc;y kh&oacute; khăn cho người mới học. Nguy&ecirc;n tắc chung l&agrave; sử dụng <code>object</code> khi ta cần một kiểu dữ liệu kh&ocirc;ng phải l&agrave; kiểu nguy&ecirc;n thủy. <code>Object</code> được sử dụng để truy cập một trong c&aacute;c th&agrave;nh vi&ecirc;n từ Đối tượng ECMAScript như:
<ol style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1"><code>hasOwnProperty</code></li>
<li style="font-weight: 400;" aria-level="1"><code>toString</code></li>
<li style="font-weight: 400;" aria-level="1"><code>isPrototypeOf</code></li>
<li style="font-weight: 400;" aria-level="1"><code>propertyIsEnumerable</code></li>
<li style="font-weight: 400;" aria-level="1"><code>toLocaleString</code></li>
<li style="font-weight: 400;" aria-level="1"><code>watch</code></li>
<li style="font-weight: 400;" aria-level="1"><code>unwatch</code></li>
<li style="font-weight: 400;" aria-level="1"><code>toSource</code></li>
<li style="font-weight: 400;" aria-level="1"><code>valueOf</code></li>
</ol>
<pre class="language-ts" data-content="print(1)%3B%0Aprint(%7B%20id%3A%201%20%7D)%3B%0Aprint(%7B%20id%3A%202%2C%20y%3A%201%20%7D)%3B%0Aprint(%7B%20id%3A%203%2C%20y%3A%202%20%7D)%3B%0Afunction%20print(o%3A%20Object)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0if%20(o.hasOwnProperty(%22y%22))%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0console.log(o)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%20else%20if%20(typeof%20o%20%3D%3D%3D%20%22number%22)%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0console.log(%22Number%20is%20%22%20%2B%20o)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%7D" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>print(1);
print({ id: 1 });
print({ id: 2, y: 1 });
print({ id: 3, y: 2 });
function print(o: Object) {
 if (o.hasOwnProperty("y")) {
 console.log(o);
 } else if (typeof o === "number"){
 console.log("Number is " + o);
 }
}</code></pre>
<code>Object</code> được ưu ti&ecirc;n sử dụng hơn so với <code>any</code> hoặc <code>unknown</code> v&igrave; bạn vẫn c&oacute; quyền truy cập v&agrave;o một số h&agrave;m cụ thể. Như đ&atilde; thấy trong v&iacute; dụ trước, ta c&oacute; thể sử dụng <code>hasOwnProperty</code> m&agrave; kh&ocirc;ng cần &eacute;p kiểu với <code>any</code>. Với <code>Object</code>, IDE cũng sẽ cung cấp c&aacute;c trường thuộc t&iacute;nh của Đối tượng.

Phân biệt Object và object