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

B&agrave;i học n&agrave;y thảo luận c&aacute;ch tạo một đối tượng bằng c&aacute;ch sử dụng từ kh&oacute;a new.
<h2 style="text-align: justify;">Tạo đối tượng th&ocirc;ng qua việc tạo một thực thể của lớp</h2>
Trong TypeScript, ta c&oacute; thể tạo một đối tượng th&ocirc;ng qua việc tạo một thực thể của <code>class</code> sử dụng từ kh&oacute;a <code>new</code>. Phạm vi của b&agrave;i học n&agrave;y kh&ocirc;ng bao h&agrave;m tất cả c&aacute;c t&iacute;nh năng hướng đối tượng, nhưng nh&igrave;n chung, TypeScript cho ph&eacute;p bạn sử dụng tất cả c&aacute;c t&iacute;nh năng hướng đối tượng, bao gồm cả c&aacute;c t&iacute;nh năng trong ECMAScript trước năm 2015, nhưng kh&ocirc;ng c&oacute; c&aacute;c kh&aacute;i niệm Object hoặc đối tượng hằng.
Điều n&agrave;y c&oacute; nghĩa l&agrave; nếu bạn muốn sử dụng t&iacute;nh chất đa h&igrave;nh, tạo ra nhiều thực thể của một kiểu, sử dụng decorator, sử dụng c&aacute;c mẫu như dependency injection hoặc thậm ch&iacute; tạo phi&ecirc;n bản m&ocirc; phỏng của c&aacute;c h&agrave;m cụ thể của đối tượng th&igrave; việc sử dụng lớp l&agrave; bắt buộc. Việc tạo một đối tượng bằng từ kh&oacute;a <code>new</code> sẽ tạo ra một thực thể của đối tượng, n&oacute; kế thừa tất cả c&aacute;c đặc điểm của <code>Object</code> viết hoa.
<pre class="language-ts" data-content="class%20MyClass%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0private%20value%3A%20string%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0constructor(val%3Astring)%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0this.value%20%3D%20val%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%7D%0Aconst%20c%20%3D%20new%20MyClass(%22ABC%22)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>class MyClass{
 private value: string;
 constructor(val:string){
 this.value = val;
 }
}
const c = new MyClass("ABC");</code></pre>
V&iacute; dụ ở tr&ecirc;n cho thấy, để tạo một thực thể một lớp, trước ti&ecirc;n lớp phải tồn tại. Thực thể được tạo ra bằng c&aacute;ch tạo đối tượng với từ kh&oacute;a <code>new</code>. Mỗi thực thể l&agrave; duy nhất v&agrave; độc lập với c&aacute;c thực thể kh&aacute;c. V&iacute; dụ tiếp theo tạo ra hai thực thể của <code>MyClass</code>. Cả hai đều l&agrave; đối tượng. Khi so s&aacute;nh c&aacute;c thực thể, kết quả trả về <code>false</code> v&igrave; ch&uacute;ng trỏ tới hai con trỏ bộ nhớ kh&aacute;c nhau. Thay đổi gi&aacute; trị của một đối tượng kh&ocirc;ng ảnh hưởng đến đối tượng thứ hai.
<pre class="language-ts" data-content="class%20MyClass%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0public%20value%3A%20string%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0constructor(val%3Astring)%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0this.value%20%3D%20val%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%7D%0Aconst%20c1%20%3D%20new%20MyClass(%22ABC%22)%3B%0Aconst%20c2%20%3D%20new%20MyClass(%22ABC%22)%3B%0Aconsole.log(c1%3D%3D%3Dc2)%3B%0Ac1.value%20%3D%20%221%22%3B%0Aconsole.log(c1.value)%3B%0Aconsole.log(c2.value)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>class MyClass{
 public value: string;
 constructor(val:string){
 this.value = val;
 }
}
const c1 = new MyClass("ABC");
const c2 = new MyClass("ABC");
console.log(c1===c2);
c1.value = "1";
console.log(c1.value);
console.log(c2.value);</code></pre>
<h2 style="text-align: justify;">C&aacute;c t&iacute;nh năng hướng đối tượng</h2>
Việc tạo ra một đối tượng bằng từ kh&oacute;a <code>new</code> cho ph&eacute;p ta sử dụng tất cả c&aacute;c t&iacute;nh năng c&oacute; sẵn trong lập tr&igrave;nh hướng đối tượng. Một đối tượng được tạo ra từ c&aacute;c loại lớp kh&aacute;c nhau bằng từ kh&oacute;a <code>new</code> c&oacute; thể tu&acirc;n theo một cấu tr&uacute;c được quy định sẵn bằng c&aacute;ch triển khai một interface, m&agrave; kh&ocirc;ng cần đi s&acirc;u v&agrave;o chi tiết cụ thể.
Trong v&iacute; dụ tiếp theo, ch&uacute;ng ta thấy rằng h&agrave;m ở d&ograve;ng 13 nhận một interface (hợp đồng) của một đối tượng c&oacute; trường thuộc t&iacute;nh <code>id</code> kiểu <code>number</code>. Interface được định nghĩa ở d&ograve;ng 1. Hai hợp đồng kh&aacute;c nhau được truyền v&agrave;o d&ograve;ng 19 v&agrave; 20. H&agrave;m kh&ocirc;ng quan t&acirc;m đến sự kh&aacute;c biệt v&igrave; n&oacute; sử dụng <code>MyContract</code>, interface n&agrave;y được triển khai trong cả hai loại đối tượng. Do đ&oacute;, d&ograve;ng 14 giới hạn trường thuộc t&iacute;nh c&oacute; thể gọi chỉ l&agrave; <code>id</code>.
<pre class="language-ts" data-content="interface%20MyContract%20%7B%0A%C2%A0%C2%A0id%3A%20number%3B%0A%7D%0A%0Aclass%20ContractTypeA%20implements%20MyContract%20%7B%0A%C2%A0%C2%A0constructor(public%20id%3A%20number)%7B%7D%0A%7D%0A%0Aclass%20ContractTypeB%20implements%20MyContract%20%7B%0A%C2%A0%C2%A0constructor(public%20id%3A%20number)%7B%7D%0A%7D%0A%0Afunction%20showContractId(c%3A%20MyContract)%3A%20void%20%7B%0A%C2%A0%C2%A0console.log(c.id)%3B%0A%7D%0A%0Aconst%20c1%20%3D%20new%20ContractTypeA(1)%3B%0Aconst%20c2%20%3D%20new%20ContractTypeB(2)%3B%0AshowContractId(c1)%3B%0AshowContractId(c2)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>interface MyContract {
 id: number;
}

class ContractTypeA implements MyContract {
 constructor(public id: number){}
}

class ContractTypeB implements MyContract {
 constructor(public id: number){}
}

function showContractId(c: MyContract): void {
 console.log(c.id);
}

const c1 = new ContractTypeA(1);
const c2 = new ContractTypeB(2);
showContractId(c1);
showContractId(c2);</code></pre>
Lập tr&igrave;nh hướng đối tượng mang đến một loạt c&aacute;c t&iacute;nh năng hữu &iacute;ch khi l&agrave;m việc với TypeScript, bao gồm ghi đ&egrave; h&agrave;m, nạp chồng h&agrave;m, h&agrave;m trừu tượng, phương thức tạo, h&agrave;m tĩnh, tất cả đều c&oacute; thể thực hiện được nhờ sự hỗ trợ của từ kh&oacute;a <code>new</code>.

Tạo đối tượng mới