TypeScript mặc d&ugrave; gi&uacute;p cho code của ch&uacute;ng ta trở n&ecirc;n mạnh mẽ hơn tuy nhi&ecirc;n lại ti&ecirc;u tốn một phần chi ph&iacute; học tập nhất định. Nếu kh&ocirc;ng được sử dụng đ&uacute;ng c&aacute;ch, c&aacute;c lỗi kh&ocirc;ng mong muốn c&oacute; thể sẽ xuất hiện. Nếu bạn cũng muốn viết m&atilde; TypeScript một c&aacute;ch thuần thục như một lập tr&igrave;nh vi&ecirc;n chuy&ecirc;n nghiệp, h&atilde;y c&ugrave;ng <a href="https://tek4.vn/">Tek4.vn</a> theo d&otilde;i b&agrave;i viết dưới đ&acirc;y để c&oacute; một số phương ph&aacute;p hay v&agrave; hiệu quả nhất khi thực h&agrave;nh với n&oacute; nh&eacute;!
&nbsp;
<h2 style="text-align: justify;">1. D&ugrave;ng <code>void</code> thay v&igrave; <code>any</code></h2>
<pre class="language-python"><code>{
 // 👎 Bad
 const main = (callback: () =&gt; any) =&gt; {
 const returnValue = callback();
 // TypeScript does not throw errors
 returnValue.get();
 };
}

{
 // 👍 Good
 const main = (callback: () =&gt; void) =&gt; {
 const returnValue = callback();
 // ❌ Property 'get' does not exist on type 'void'
 returnValue.get();
 };
}

export {};
</code></pre>
Lu&ocirc;n x&aacute;c định gi&aacute; trị trả về của một h&agrave;m, kh&ocirc;ng sử dụng any v&agrave; nếu bạn muốn bỏ qua gi&aacute; trị trả về, tốt hơn n&ecirc;n sử dụng void thay v&igrave; any.
&nbsp;
<h2 style="text-align: justify;">2. Sử dụng <code>string enums</code> thay v&igrave; <code>numeric enums</code></h2>
<pre class="language-python"><code>{
 enum Fruit {
 APPLE, // APPLE = 0,
 PINEAPPLE, // PINEAPPLE = 1,
 ORANGE, // ORANGE = 2,
 }

 const apple1: Fruit.APPLE = Fruit.APPLE;
 // All numeric types can be assigned to it.
 // TypeScript does not throw errors.
 const apple2: Fruit.APPLE = 3000;
}

{
 enum Fruit {
 APPLE = 'Apple',
 PINEAPPLE = 'Pineapple',
 ORANGE = 'Orange',
 }

 // ✅ Only itself can be assigned to it.
 const apple1: Fruit.APPLE = Fruit.APPLE;
 // ❌ Even the same string literal.
 const apple2: Fruit.APPLE = 'Apple';
}

export {};
</code></pre>
Khi kh&ocirc;ng đặt c&aacute;c gi&aacute; trị một c&aacute;ch r&otilde; r&agrave;ng cho c&aacute;c bảng liệt k&ecirc;, ch&uacute;ng sẽ được đặt th&agrave;nh c&aacute;c số tăng dần theo mặc định. V&igrave; vậy, <code>Fruit.APPLE</code>, <code>Fruit.PINEAPPLE</code> v&agrave; <code>Fruit.ORANGE</code> ở tr&ecirc;n sẽ được đặt th&agrave;nh 0, 1 v&agrave; 2. Khi ch&uacute;ng ta sử dụng ch&uacute;ng l&agrave;m kiểu của một biến, ch&iacute;nh n&oacute; v&agrave; tất cả c&aacute;c số đều c&oacute; thể được g&aacute;n cho ch&iacute;nh n&oacute;.
Ngược lại với một string enum, chỉ bản th&acirc;n n&oacute; mới c&oacute; thể được g&aacute;n cho n&oacute;. V&igrave; vậy, khi bạn đang gặp kh&oacute; khăn trong việc sử dụng kiểu liệt k&ecirc; số hoặc kiểu liệt k&ecirc; chuỗi, trước ti&ecirc;n h&atilde;y sử dụng kiểu liệt k&ecirc; chuỗi. V&igrave; n&oacute; dễ gỡ lỗi hơn v&agrave; &iacute;t bị lỗi hơn.
&nbsp;
<h2 style="text-align: justify;">3. Sử dụng đ&uacute;ng kiểu <code>alias</code> v&agrave; <code>interfaces</code></h2>
<pre class="run-code language-python" data-content="%7B%0A%20%20interface%20PrintName%20%7B%0A%20%20%20%20(name%3A%20string)%3A%20void%3B%0A%20%20%7D%0A%0A%20%20%2F%2F%20%E2%9C%85%20Auto%20merge%0A%20%20interface%20PrintName%20%7B%0A%20%20%20%20(name%3A%20number)%3A%20void%3B%0A%20%20%7D%0A%7D%0A%0A%7B%0A%20%20type%20PrintName%20%3D%20(name%3A%20string)%20%3D%3E%20void%3B%0A%0A%20%20%2F%2F%20%E2%9D%8C%20Duplicate%20identifier%20'PrintName'%0A%20%20type%20PrintName%20%3D%20(name%3A%20number)%20%3D%3E%20void%3B%0A%7D%0A%0Aexport%20%7B%7D%3B%0A" data-language="python2"><code>{
 interface PrintName {
 (name: string): void;
 }

 // ✅ Auto merge
 interface PrintName {
 (name: number): void;
 }
}

{
 type PrintName = (name: string) =&gt; void;

 // ❌ Duplicate identifier 'PrintName'
 type PrintName = (name: number) =&gt; void;
}

export {};
</code></pre>
Kiểu Alias bao gồm hầu hết tất cả c&aacute;c t&iacute;nh năng của interfaces, nhưng interfaces lu&ocirc;n c&oacute; thể mở rộng, trong khi alias th&igrave; kh&ocirc;ng. V&igrave; vậy, bạn c&oacute; thể cần phải chọn ch&uacute;ng theo c&aacute;c trường hợp cụ thể.
&nbsp;
<h2 style="text-align: justify;">4. Lưu &yacute; thứ tự nạp chồng h&agrave;m</h2>
<pre class="language-python"><code>// 👎 Bad

declare function getName(x: unknown): unknown;
declare function getName(x: string): string;
declare function getName(x: number): number;

// ❌ str is unknown not string
const str = getName('11');
// ❌ num is unknown not number
const num = getName(11);

export {};
</code></pre>
<pre class="language-python"><code>// 👍 Good

declare function getName(x: string): string;
declare function getName(x: number): number;
declare function getName(x: unknown): unknown;

// ✅ str is string
const str = getName('11');
// ✅ num is number
const num = getName(11);

export {};</code></pre>
Đừng đặt nhiều h&agrave;m nạp chồng chung trước những h&agrave;m cụ thể. Điều n&agrave;y l&agrave; do TypeScript ưu ti&ecirc;n nạp chồng khớp đầu ti&ecirc;n khi ph&acirc;n t&iacute;ch c&uacute; ph&aacute;p. V&igrave; vậy, khi nạp chồng trước c&agrave;ng tổng qu&aacute;t, th&igrave; nạp chồng sau c&agrave;ng cụ thể sẽ bị bỏ qua.
&nbsp;
<h2 style="text-align: justify;">5. Sử dụng c&aacute;c kiểu union</h2>
<pre class="language-python"><code>// 👎 Bad

declare function getName(x: string): string;
declare function getName(x: number): string;

function main(x: number | string) {
 // ❌ No overload matches this call
 return getName(x);

 // 🙅 The following code works but is redundant
 // if (typeof x === "number") {
 // return getName(x)
 // } else {
 // return getName(x)
 // }
}

export {};</code></pre>
<pre class="language-python"><code>// 👍 Good

declare function getName(x: string | number): string;

function main(x: number | string) {
 // ✅
 return getName(x);
}

export {};</code></pre>
Nếu c&ugrave;ng một vị tr&iacute; tham số c&oacute; thể chấp nhận c&aacute;c kiểu kh&aacute;c nhau, h&atilde;y sử dụng c&aacute;c kiểu union thay v&igrave; ghi c&aacute;c kiểu overload với c&aacute;c kiểu kh&aacute;c nhau. Bởi v&igrave; n&oacute; ngắn gọn hơn v&agrave; c&oacute; nhiều dung sai hơn cả khi c&aacute;c h&agrave;m b&ecirc;n ngo&agrave;i vượt qua c&aacute;c đối số của ch&uacute;ng.
&nbsp;
<h2 style="text-align: justify;">6. D&ugrave;ng tham số t&ugrave;y chọn</h2>
<pre class="language-python"><code>// 👍 Good

declare function getName(x: string | number): string;

function main(x: number | string) {
 // ✅
 return getName(x);
}

export {};</code></pre>
<pre class="language-python"><code>// 👍 Good

declare function getName(first: string, second?: string): string;

// ✅
getName('1', undefined);

function main(callback: (a: string, b: number) =&gt; void) {}

// ✅ TypeScript throws error because `b` is of type number
main(getName);

export {};</code></pre>
Nếu tham số theo sau l&agrave; t&ugrave;y chọn, h&atilde;y sử dụng tham số t&ugrave;y chọn thay v&igrave; viết c&aacute;c h&agrave;m nạp chồng kh&aacute;c. C&oacute; hai l&yacute; do cụ thể:&nbsp;
<ul style="text-align: justify;">
<li>Đầu ti&ecirc;n: Trong đoạn m&atilde; dưới đ&acirc;y, ch&uacute;ng ta mong đợi tham số thứ hai của <code>getName</code> l&agrave; t&ugrave;y chọn. Nhưng h&agrave;m nạp chồng được định nghĩa y&ecirc;u cầu truyền v&agrave;o một chuỗi. V&agrave; chức năng được x&aacute;c định bởi tham số t&ugrave;y chọn l&agrave; đ&uacute;ng. StackBlitz kh&ocirc;ng hiển thị lỗi n&agrave;y theo mặc định (v&igrave; "strict null checking" kh&ocirc;ng được khởi động).</li>
</ul>
<img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/f8ecd32a-85dc-4da5-a28e-e0483728ecf4" alt="D&ugrave;ng tham số t&ugrave;y chọn" />
<ul style="text-align: justify;">
<li>Thứ hai: Trong đoạn m&atilde; tr&ecirc;n, khi truyền <code>getName</code> l&agrave;m đối số cho h&agrave;m <code>main</code>, h&agrave;m được x&aacute;c định bởi overload sẽ khớp với h&agrave;m nạp chồng đầu ti&ecirc;n. Điều n&agrave;y l&agrave; do TypeScript giải quyết vấn đề tương th&iacute;ch bằng c&aacute;ch xem liệu bất kỳ dấu hiệu n&agrave;o của đ&iacute;ch c&oacute; thể được gọi với c&aacute;c đối số của nguồn v&agrave; cho ph&eacute;p sử dụng c&aacute;c đối số kh&ocirc;ng li&ecirc;n quan. V&igrave; vậy, TypeScript kh&ocirc;ng tạo ra sai s&oacute;t dẫn đến lỗi. Ngược lại, một h&agrave;m được khai b&aacute;o với c&aacute;c tham số t&ugrave;y chọn sẽ g&acirc;y ra lỗi.</li>
</ul>
&nbsp;
Kết luận
Tr&ecirc;n đ&acirc;y, Tek4.vn vừa giới thiệu đến bạn 6 Tips gi&uacute;p bạn viết th&agrave;nh thạo TypeScript hơn. Hi vọng b&agrave;i viết n&agrave;y c&oacute; &iacute;ch cho bạn!
Ch&uacute;c bạn th&agrave;nh c&ocirc;ng!

Admin

6 Tips giúp bạn viết TypeScript tốt hơn

Cùng tác giả

Admin

Có liên quan