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ẽ t&igrave;m hiểu c&aacute;ch TypeScript suy luận kiểu dữ liệu cho h&agrave;m c&oacute; nhiều kiểu tham số cũng như sự thay đổi của kiểu trả về.
<h2 style="text-align: justify;">Suy luận kiểu cho h&agrave;m c&oacute; nhiều kiểu trả về</h2>
H&agrave;m c&oacute; thể trả về kiểu dữ liệu ngầm định hoặc tường minh. Theo mặc định, TypeScript coi h&agrave;m kh&ocirc;ng trả về gi&aacute; trị l&agrave; kiểu void. Tuy nhi&ecirc;n, nếu ta kh&ocirc;ng chỉ định kiểu trả về v&agrave; chương tr&igrave;nh trả về một số, kiểu trả về sẽ được tự động x&aacute;c định l&agrave; số. Nếu sau đ&oacute; h&agrave;m trả về một chuỗi th&igrave; bạn h&atilde;y đo&aacute;n xem kiểu trả về dự kiến l&agrave; g&igrave;? Sự mơ hồ như vậy c&oacute; thể g&acirc;y kh&oacute; khăn trong việc dự đo&aacute;n kiểu trả về của h&agrave;m, mặc d&ugrave; n&oacute; tạo ra sự linh hoạt với việc trả về một mảng chứa nhiều kiểu dữ liệu kh&aacute;c nhau.
Ta c&oacute; thể trả về nhiều hơn một kiểu dữ liệu bằng c&aacute;ch sử dụng union v&agrave; đồng thời vẫn giới hạn c&aacute;c kiểu trả về mong muốn. Tuy nhi&ecirc;n, điều n&agrave;y c&oacute; thể dẫn đến sự mơ hồ trong việc x&aacute;c định kiểu trả về của h&agrave;m. Ch&iacute;nh v&igrave; vậy, ch&uacute;ng ta n&ecirc;n định nghĩa r&otilde; kiểu trả về thay v&igrave; phụ thuộc v&agrave;o suy luận kiểu. Việc chỉ định r&otilde; kiểu dữ liệu sẽ đặt ra một hợp đồng r&otilde; r&agrave;ng về kiểu trả về, n&oacute; đảm bảo rằng kiểu trả về sẽ kh&ocirc;ng thể thay đổi trừ khi ta sửa đổi kiểu dữ liệu bằng c&aacute;ch thủ c&ocirc;ng.
<pre class="language-ts" data-content="%C2%A0%C2%A0%C2%A0%C2%A0function%20withImplicitReturnType(b%3A%20boolean)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0if%20(b)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0return%2010%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0return%20%22test%22%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%C2%A0%C2%A0%C2%A0%C2%A0console.log(withImplicitReturnType(true))%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code> function withImplicitReturnType(b: boolean) {
 if (b) {
 return 10;
 }
 return "test";
 }
 console.log(withImplicitReturnType(true));</code></pre>
Đoạn code tr&ecirc;n suy luận kiểu trả về l&agrave; union của kiểu số <code>10</code> v&agrave; kiểu chuỗi "test": <code>10 | "test"</code>. L&yacute; do l&agrave; v&igrave; d&ograve;ng 3 v&agrave; d&ograve;ng 5 trả về hai kiểu kh&aacute;c nhau ở hai vị tr&iacute; kh&aacute;c nhau.
Vấn đề l&agrave; trong tương lai, một điều kiện <code>else</code> c&oacute; thể thay đổi h&agrave;m để suy luận một kiểu trả về mới: <code>number | string | boolean</code> như trong v&iacute; dụ dưới đ&acirc;y.
<pre class="language-ts" data-content="%C2%A0%C2%A0%C2%A0%C2%A0function%20withImplicitReturnType(b%3A%20boolean)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0if%20(b)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0return%2010%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7D%20else%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0return%20true%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0return%20%22test%22%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%C2%A0%C2%A0%C2%A0%C2%A0console.log(withImplicitReturnType(true))%3B" data-language="ts" data-ace-language="typescript" data-name-language="TypeScript" data-main-file="main.ts"><code> function withImplicitReturnType(b: boolean) {
 if (b) {
 return 10;
 } else {
 return true;
 }
 return "test";
 }
 console.log(withImplicitReturnType(true));</code></pre>
<h2 style="text-align: justify;">Suy luận kiểu v&agrave; sự thay đổi của kiểu trả về</h2>
Suy luận kiểu trả về c&oacute; thể gi&uacute;p ta viết code ngắn gọn hơn v&agrave; tr&aacute;nh viết r&otilde; kiểu dữ liệu. Tuy nhi&ecirc;n, c&aacute;i gi&aacute; phải đ&aacute;nh đổi l&agrave; code trở n&ecirc;n kh&oacute; hiểu hơn. Mặc d&ugrave; c&aacute;c v&iacute; dụ trước đ&oacute; sử dụng h&agrave;m ngắn gọn v&agrave; viết h&agrave;m nhỏ được coi l&agrave; một thực h&agrave;nh tốt, nhưng trong thực tế, kh&ocirc;ng phải l&uacute;c n&agrave;o c&aacute;c h&agrave;m cũng đều ngắn gọn như trong v&iacute; dụ. Trong c&aacute;c dự &aacute;n thực tế, ta sẽ gặp những h&agrave;m lớn v&agrave; phức tạp hơn nhiều v&agrave; việc duyệt qua to&agrave;n bộ h&agrave;m để t&igrave;m c&aacute;c c&acirc;u lệnh khai b&aacute;o kiểu trả về sẽ tốn rất nhiều thời gian v&agrave; c&ocirc;ng sức.
Lời khuy&ecirc;n d&agrave;nh cho bạn l&agrave; h&atilde;y viết r&otilde; r&agrave;ng kiểu dữ liệu để tr&aacute;nh g&acirc;y nhầm lẫn trong tương lai v&agrave; đồng thời gi&uacute;p tạo t&agrave;i liệu tham khảo tốt hơn cho m&atilde; nguồn.

Suy luận kiểu trả về của hàm