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 chỉ định một h&agrave;nh động kh&ocirc;ng l&agrave;m g&igrave; cả.
Void c&oacute; nghĩa l&agrave; kh&ocirc;ng c&oacute; g&igrave; hoặc kh&ocirc;ng trả về gi&aacute; trị. Tuy nhi&ecirc;n, <code>undefined</code> c&oacute; thể được g&aacute;n cho <code>void</code>. Việc g&aacute;n <code>undefined</code> cho <code>void</code> kh&ocirc;ng c&oacute; &yacute; nghĩa g&igrave; đặc biệt trong ngữ cảnh của TypeScript. Tuy nhi&ecirc;n, một h&agrave;m kh&ocirc;ng trả về bất kỳ gi&aacute; trị n&agrave;o n&ecirc;n được đ&aacute;nh dấu bằng từ kh&oacute;a đặt ri&ecirc;ng <code>void</code>.
<pre class="language-ts" data-content="function%20executeFunctionWithoutReturnType()%3A%20void%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20undefined%3B%0A%7D%0Alet%20returnType%20%3D%20executeFunctionWithoutReturnType()%3B%20%2F%2F%20Hover%20the%20variable%20to%20see%20%22void%22%0Aconsole.log(returnType)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>function executeFunctionWithoutReturnType(): void {
 return undefined;
}
let returnType = executeFunctionWithoutReturnType(); // Hover the variable to see "void"
console.log(returnType);</code></pre>
Nếu một h&agrave;m kh&ocirc;ng được đ&aacute;nh dấu r&otilde; r&agrave;ng với void l&agrave; gi&aacute; trị trả về, th&igrave; theo mặc định, TypeScript sẽ đ&aacute;nh dấu gi&aacute; trị trả về l&agrave; void. Điều n&agrave;y c&oacute; thể g&acirc;y ra vấn đề, v&igrave; lập tr&igrave;nh vi&ecirc;n c&oacute; thể trả về bất cứ thứ g&igrave; trong h&agrave;m đ&oacute;. Nếu kiểu trả về được đặt r&otilde; r&agrave;ng l&agrave; void, việc cố gắng trả về bất cứ gi&aacute; trị n&agrave;o kh&aacute;c undefined sẽ dẫn đến lỗi bi&ecirc;n dịch.
Ch&uacute;ng ta c&ugrave;ng xem x&eacute;t c&aacute;c v&iacute; dụ sử dụng c&ugrave;ng một h&agrave;m. Lập tr&igrave;nh vi&ecirc;n thứ nhất commit code m&agrave; kh&ocirc;ng chỉ định r&otilde; r&agrave;ng kiểu trả về. Như bạn sẽ thấy sau n&agrave;y, TypeScript tự suy ra kiểu l&agrave; <code>number</code>, kh&ocirc;ng phải <code>void</code>, v&igrave; c&acirc;u lệnh return trả về <code>1</code>. Sau đ&oacute;, một lập tr&igrave;nh vi&ecirc;n kh&aacute;c trả về một chuỗi thay v&igrave; số, v&agrave; b&acirc;y giờ h&agrave;m đ&oacute; trả về chuỗi, thay v&igrave; số hoặc <code>void</code>. Điều n&agrave;y trở n&ecirc;n phức tạp hơn nếu c&oacute; nhiều c&acirc;u lệnh return trong một h&agrave;m lớn. H&agrave;m đ&oacute; sẽ trả về nhiều kiểu dữ liệu, mặc d&ugrave; theo khai b&aacute;o h&agrave;m, n&oacute; tr&ocirc;ng c&oacute; vẻ như sẽ trả về <code>void</code>. Tr&ecirc;n thực tế, h&agrave;m c&oacute; thể trả về bất cứ thứ g&igrave;.
Đoạn code sau đ&acirc;y cho thấy sự thay đổi của h&agrave;m, ban đầu h&agrave;m trả về số, sau đ&oacute; l&agrave; chuỗi v&agrave; cuối c&ugrave;ng l&agrave; cả hai kiểu.
<pre class="language-ts" data-content="function%20function1Commit1()%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0return%201%3B%0A%7D%0A%0Afunction%20function1Commit2()%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20%221%22%3B%0A%7D%0A%0Afunction%20function1Commit3()%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0if(Math.random()%3E0.5)%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0return%20%221%22%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0else%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0return%201%3B%0A%7D" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>function function1Commit1(){
 return 1;
}

function function1Commit2(){
 return "1";
}

function function1Commit3(){
 if(Math.random()&gt;0.5)
 return "1";
 else
 return 1;
}</code></pre>
Theo mặc định, trả về <code>any</code> dẫn đến việc sử dụng kết quả của h&agrave;m một c&aacute;ch kh&ocirc;ng ch&iacute;nh x&aacute;c. Vấn đề n&agrave;y xảy ra khi ta gọi một h&agrave;m từ kết quả của một h&agrave;m kh&ocirc;ng tồn tại v&agrave;o thời điểm chạy v&agrave; g&acirc;y ra lỗi. V&igrave; vậy, ta kh&ocirc;ng n&ecirc;n sử dụng <code>any</code> hoặc bỏ qua bước x&aacute;c định kiểu. Thay v&agrave;o đ&oacute;, h&atilde;y sử dụng <code>void</code> để tr&aacute;nh bất kỳ thay đổi h&agrave;nh vi n&agrave;o kh&ocirc;ng x&aacute;c định được.
Một thực h&agrave;nh tốt l&agrave; rời khỏi h&agrave;m trước dấu ngoặc nhọn cuối c&ugrave;ng v&agrave; sử dụng c&acirc;u lệnh return m&agrave; kh&ocirc;ng c&oacute; gi&aacute; trị. Trong trường hợp n&agrave;y, c&acirc;u lệnh return tương đương với việc trả về <code>undefined</code>.
<pre class="language-ts" data-content="function%20leaveEarly(leaveFast%3A%20boolean)%7B%0A%C2%A0%C2%A0console.log(%22Hello%22)%3B%0A%C2%A0%C2%A0if(leaveFast)%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0console.log(%22Quick%20bye!%22)%0A%C2%A0%C2%A0%C2%A0%C2%A0return%3B%0A%C2%A0%C2%A0%7D%0A%C2%A0%C2%A0console.log(%22Later%20good%20bye%22)%3B%0A%7D%0A%0Aconsole.log(%22--%20With%20true%20--%22)%3B%0Alet%20returnValue1%20%3D%20leaveEarly(true)%3B%0Aconsole.log(%22--%20With%20false%20--%22)%3B%0Alet%20returnValue2%20%3D%20leaveEarly(false)%3B%0A%0Aconsole.log(%22--%20Types%20--%22)%3B%0Aconsole.log(typeof%20returnValue1)%3B%0Aconsole.log(typeof%20returnValue1)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>function leaveEarly(leaveFast: boolean){
 console.log("Hello");
 if(leaveFast){
 console.log("Quick bye!")
 return;
 }
 console.log("Later good bye");
}

console.log("-- With true --");
let returnValue1 = leaveEarly(true);
console.log("-- With false --");
let returnValue2 = leaveEarly(false);

console.log("-- Types --");
console.log(typeof returnValue1);
console.log(typeof returnValue1);</code></pre>
Việc đ&aacute;nh dấu h&agrave;m l&agrave; <code>void</code> cho ph&eacute;p sử dụng <code>return</code> sớm v&igrave; n&oacute; tương tự như việc trả về <code>undefined</code>. Tuy nhi&ecirc;n, trong TypeScript, kiểu của hai biến n&agrave;y được thu hẹp th&agrave;nh <code>void</code>. Bạn c&oacute; thể thấy điều đ&oacute; bằng c&aacute;ch di chuột qua hai biến trả về trong đoạn code sau đ&acirc;y, trong đ&oacute; c&aacute;c biến được đặt th&agrave;nh kiểu <code>void</code>.
<pre class="language-ts" data-content="function%20leaveEarly(leaveFast%3A%20boolean)%3A%20void%20%7B%0A%C2%A0%C2%A0console.log(%22Hello%22)%3B%0A%C2%A0%C2%A0if(leaveFast)%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0console.log(%22Quick%20bye!%22)%0A%C2%A0%C2%A0%C2%A0%C2%A0return%3B%0A%C2%A0%C2%A0%7D%0A%C2%A0%C2%A0console.log(%22Later%20good%20bye%22)%3B%0A%7D%0A%0Aconsole.log(%22--%20With%20true%20--%22)%3B%0Alet%20voidVar1%3A%20void%20%3D%20leaveEarly(true)%3B%0Aconsole.log(%22--%20With%20false%20--%22)%3B%0Alet%20voidVar2%3A%20void%20%3D%20leaveEarly(false)%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>function leaveEarly(leaveFast: boolean): void {
 console.log("Hello");
 if(leaveFast){
 console.log("Quick bye!")
 return;
 }
 console.log("Later good bye");
}

console.log("-- With true --");
let voidVar1: void = leaveEarly(true);
console.log("-- With false --");
let voidVar2: void = leaveEarly(false);</code></pre>
Như bạn c&oacute; thể thấy trong v&iacute; dụ cuối c&ugrave;ng, ta c&oacute; thể khai b&aacute;o một biến l&agrave; <code>void</code> nhưng điều n&agrave;y kh&ocirc;ng c&oacute; &yacute; nghĩa trong TypeScript.
<pre class="language-ts" data-content="let%20variableVoid%3A%20void%3B%0AvariableVoid%20%3D%20undefined%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code>let variableVoid: void;
variableVoid = undefined;</code></pre>
Sử dụng <code>void</code> l&agrave; một c&aacute;ch để đảm bảo rằng h&agrave;m kh&ocirc;ng trả về bất kỳ gi&aacute; trị g&igrave; cho d&ugrave; n&oacute; c&oacute; thay đổi như thế n&agrave;o.
Trong b&agrave;i học tiếp theo, ch&uacute;ng ta sẽ thấy rằng <code>never</code> kh&ocirc;ng phải l&agrave; một h&agrave;m kh&ocirc;ng trả về bất kỳ gi&aacute; trị n&agrave;o như <code>void</code>.

Sử dụng void để không trả về giá trị