Bạn c&oacute; thể kh&ocirc;ng tin điều n&agrave;y, nhưng ngay cả những lập tr&igrave;nh vi&ecirc;n l&atilde;o luyện cũng c&oacute; nhiều người kh&ocirc;ng biết g&igrave; về TypeScript. Nếu bạn mới học về TypeScript, nhớ xem <a href="https://www.typescriptlang.org/docs/handbook/typescript-from-scratch.html">Hướng dẫn d&agrave;nh cho người mới</a> trước.
Trong b&agrave;i viết h&ocirc;m hay, Tek4 sẽ hướng dẫn một số kiểu dữ liệu n&acirc;ng cao trong TypeScript.
<h1 id="9434" class="sp sq iu bn sr ss st su nx sv sw sx ob ka sy kb oe kd sz ke oh kg ta kh ok tb fw" style="text-align: justify;" data-selectable-paragraph="">Generics</h1>
<pre class="language-python"><code>// Bad
type APIResponse = {
 items?: any[];
 item?: any;
}

// Good
type APIResponse&lt;T&gt; = {
 items?: T[];
 item: T;
}

type User = {
 id: string;
}

const fetchCall = &lt;T&gt;(method: string, url: string): Promise&lt;APIResponse&lt;T&gt;&gt; =&gt; {
 // ...
}

export const getUser = (id: string): Promise&lt;User&gt; =&gt; {
 return fetchCall&lt;User&gt;(HttpMethod.GET, `/v1/user/${id}`)
 .then(({ item }) =&gt; item)
}</code></pre>
Ch&uacute;ng ta kh&ocirc;ng n&ecirc;n lạm dụng <code>any</code> m&agrave; h&atilde;y tr&aacute;nh sử dụng từ kh&oacute;a n&agrave;y nhiều nhất c&oacute; thể. Thay v&agrave;o đ&oacute;, ta sẽ sử dụng kiểu dữ liệu generic. Trong đoạn code b&ecirc;n dưới, bạn c&oacute; thể truyền <code>User</code> tới phản hồi, trong đ&oacute; type c&oacute; dạng:
<pre class="run-code language-python" data-content="%7B%0A%20%20item%3F%3A%20%7B%0A%20%20%20%20id%3A%20string%0A%20%20%7D%3B%0A%20%20items%3F%3A%20%7B%0A%20%20%20%20id%3A%20string%0A%20%20%7D%5B%5D%3B%0A%7D" data-language="python2"><code>{
 item?: {
 id: string
 };
 items?: {
 id: string
 }[];
}</code></pre>
<h1 style="text-align: justify;">&nbsp;To&aacute;n tử Keyof</h1>
<pre class="language-python"><code>type ExpiryDateTime = {
 days: number;
 hours: number;
 minutes: number;
}

const expiryDateTime: ExpiryDateTime = {
 days: 0,
 hours: 0,
 minutes: 0,
}

const onChange = (
 key: keyof ExpiryDateTime, // days | hours | minutes,
 val: number
): void =&gt; {
 expiryDateTime[key] = val
}</code></pre>
Với <code>keyof</code>, bạn kh&ocirc;ng cần phải &aacute;p dụng <a href="https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types">kiểu kết hợp</a> cho <code>key</code> trong <code>onChange</code>. <code>expiryDateTime</code> cũng sẽ kiểm tra xem key c&oacute; tồn tại kh&ocirc;ng.
Nếu bạn l&agrave;m như sau:
<pre class="language-python"><code>type Foo = { bar: number } &amp; ExpiryDateTime
const onChange = (
 key: keyof Foo,
 val: number
): void =&gt; {
 expiryDateTime[key] = val
}</code></pre>
Kết quả sẽ hiển thị 1 d&ograve;ng đỏ b&ecirc;n dưới <code>expiryDateTime</code> cho biết <code>Property 'bar' does not exist on type 'ExpiryDateTime'</code>. Lỗi tương tự cũng xảy ra nếu bạn sử dụng <code>string</code> cho <code>key</code>.
<code>keyof</code> sẽ hỗ trợ qu&aacute; tr&igrave;nh t&aacute;i cấu tr&uacute;c code. Nếu đang sử dụng kiểu kết hợp, bạn sẽ phải l&agrave;m 2 c&ocirc;ng việc c&ugrave;ng l&uacute;c.
<h1 style="text-align: justify;">To&aacute;n tử Typeof</h1>
<code>typeof</code> cho ph&eacute;p ta tr&iacute;ch xuất kiểu dữ liệu của biến. Kh&ocirc;ng giống như c&uacute; ph&aacute;p <code>typeof</code> của JavaScript, <code>typeof</code> của TypeScript cho ph&eacute;p định nghĩa kiểu dữ liệu của một biến th&ocirc;ng qua kiểu dữ liệu của biến kh&aacute;c:
<pre class="language-python"><code>let foo = "bar";
let name: typeof foo; // string</code></pre>
H&atilde;y thử với code phức tạp hơn:
<pre class="language-python"><code>const getHisOrHer = (val: number): "his" | "her" =&gt; {
 // ...
}

type HisOrHer = ReturnType&lt;typeof getHisOrHer&gt; // "his" | "her"

// OR

type GetHisOrHerFunc = (val: number) =&gt; "his" | "her"

const getHisOrHer: GetHisOrHerFunc = (val) =&gt; {
 // ...
}

type HisOrHer = ReturnType&lt;GetHisOrHerFunc&gt; // "his" | "her"</code></pre>
Nếu thực hiện thay đổi tr&ecirc;n kiểu dữ liệu trả về của <code>getHisOrHer</code>, kiểu dữ liệu của <code>HisOrHer</code> sẽ thay đổi theo, một c&ocirc;ng đ&ocirc;i việc!
<h1 style="text-align: justify;">Kiểu Conditional</h1>
<pre class="language-python"><code>type NumberId = {
 id: number;
}

type StringId = {
 id: string;
}

type GetId =
 | ((id: string) =&gt; StringId)
 | ((id: string) =&gt; NumberId) 
 | ((id: string | number) =&gt; StringId | NumberId)</code></pre>
Bạn đ&atilde; bao giờ gặp phải t&igrave;nh huống kh&oacute; xử như n&agrave;y chưa? Bạn c&oacute; thể thử Kiểu Conditional để giải quyết t&igrave;nh trạng đ&oacute;.
<pre class="language-python"><code>type NumberId = {
 id: number;
};

type StringId = {
 id: string;
};

type StringOrNumber&lt;T extends string | number&gt; = T extends string
 ? StringId
 : NumberId

const getId = &lt;T extends string | number&gt;(val: T): StringOrNumber&lt;T&gt; =&gt; {
 //...
}

const s = getId("1")
const n = getId(2)</code></pre>
Kiểu n&agrave;y kh&aacute; giống với to&aacute;n tử bậc 3 của JavaScript: <code>condition ? true : false</code>
<code>s</code> truyền <code>string</code> dưới dạng đối số để c&oacute; thể sử dụng kiểu <code>StringId</code> khi n truyền <code>number</code><code> </code>v&agrave; sau đ&oacute; trả về <code>NumberId</code>.
Nhược điểm l&agrave; bạn kh&ocirc;ng thể th&ecirc;m lựa chọn thứ 3 hay nhiều hơn.
<h1 style="text-align: justify;">Kiểu Mapped</h1>
<pre class="language-python"><code>type Product = {
 [productName: string]: {
 amount: {
 selling: number;
 deno: number;
 cost: number;
 };
 code: string;
 subCode: string;
 }
}</code></pre>
Đ&ocirc;i khi, bạn cần sử dụng dynamic key cho kiểu dữ liệu như trong đoạn code tr&ecirc;n. T&ecirc;n sản phẩm l&agrave; kh&oacute;a đối tượng, nhưng tất cả c&aacute;c gi&aacute; trị đều như nhau. Tuy nhi&ecirc;n, với kiểu mapped, bạn kh&ocirc;ng cần phải định nghĩa kiểu dữ liệu cho từng t&ecirc;n sản phẩm.
<pre class="language-python"><code>type RGB = {
 r: number;
 g: number;
 b: number;
}

type Color = {
 color1: RGB;
 color2: RGB;
}

type toSwitch&lt;T&gt; = {
 [Property in keyof T]: boolean;
}

const colorSwitch: toSwitch&lt;Color&gt; = {
 color1: false,
 color2: false,
}</code></pre>
Phức tạp hơn l&agrave; khi bạn th&ecirc;m 2 biến, 1 biến ứng với gi&aacute; trị m&agrave;u v&agrave; biến kh&aacute;c ứng với bộ chuyển đổi m&agrave;u. Kiểu dữ liệu được &aacute;nh xạ sẽ giảm khả năng gặp lỗi khi bạn th&ecirc;m một m&agrave;u mới.
<h1 style="text-align: justify;">Mapping Modifiers</h1>
Một dạng n&acirc;ng cao của kiểu mapped.
<pre class="language-python"><code>type RGB = {
 r: number;
 g: number;
 b: number;
};

type ImmutableColor = {
 readonly color1: RGB;
 readonly color2: RGB;
};

// Removes 'readonly' attributes from a type's properties
type toMutable&lt;T&gt; = {
 -readonly [Property in keyof T]: T[Property];
};
type MutableColor = toMutable&lt;ImmutableColor&gt;;

/*
type MutableColor = {
 color1: RGB;
 color2: RGB;
}
*/</code></pre>
Bạn c&oacute; thể sử dụng <code>-</code> l&agrave;m tiền tố để x&oacute;a 1 modifier hoặc <code>+</code> để th&ecirc;m 1 modifier. Trong đoạn code tr&ecirc;n, <code>toMutable</code> đ&atilde; x&oacute;a modifier <code>readonly</code>.
<h1 style="text-align: justify;">&Aacute;nh xạ lại kh&oacute;a qua <code>as</code></h1>
<pre class="language-python"><code>type RGB = {
 r: number;
 g: number;
 b: number;
};

type Color = {
 color1: RGB;
 color2: RGB;
};

type Getters&lt;T&gt; = {
 [Property in keyof T as `get${Capitalize&lt;string &amp; Property&gt;}`]: () =&gt; T[Property]
}

type ColorGetter = Getters&lt;Color&gt;;
/*
type ColorGetter = {
 getColor1: () =&gt; RGB;
 getColor2: () =&gt; RGB;
}
*/</code></pre>
<code>Capitalize</code> l&agrave; một dạng &eacute;p kiểu dữ liệu cho chuỗi, ngo&agrave;i ra c&ograve;n c&oacute;:
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Capitalize - Chuyển k&yacute; tự đầu ti&ecirc;n th&agrave;nh chữ hoa</li>
<li style="font-weight: 400;" aria-level="1">Uncapitalize - Chuyển k&yacute; tự đầu ti&ecirc;n th&agrave;nh chữ thường</li>
<li style="font-weight: 400;" aria-level="1">Capitalize - Chuyển k&yacute; tự đầu ti&ecirc;n th&agrave;nh chữ hoa</li>
<li style="font-weight: 400;" aria-level="1">Uppercase - Chuyển tất cả c&aacute;c k&yacute; tự th&agrave;nh chữ hoa</li>
<li style="font-weight: 400;" aria-level="1">Lowercase - Chuyển tất cả c&aacute;c k&yacute; tự th&agrave;nh chữ thường</li>
</ul>
<h1 style="text-align: justify;">Kiểu Template Literal</h1>
<pre class="language-python"><code>type Locale = "zh" | "en" | "ms";
type Lang = `lang-${Locale}`;

// type Lang = "lang-zh" | "lang-en" | "lang-ms"</code></pre>
Tương tự như template literal của JavaScript, kiểu n&agrave;y khai b&aacute;o type tr&ecirc;n đầu k&yacute; tự chuỗi.
<h1 style="text-align: justify;">Kiểu Utility</h1>
<pre class="language-python"><code>type TodoWithId = {
 readonly id: string;
 title: string;
 subtitle: null | string;
 description: string;
}

// Pick&lt;T, Keys&gt;
type Todo = Pick&lt;TodoWithId, "title" | "subtitle" | "description"&gt;;
// Or
// Omit&lt;T, Keys&gt;
type Todo = Omit&lt;TodoWithId, "id"&gt;

const t1: Todo = {
 title: "foo",
 subtitle: "bar",
 description: "",
};

// Partial&lt;T&gt;
const updateTodo = (todo: Todo, update: Partial&lt;Todo&gt;): Todo =&gt; {
 // ...
}
const t2 = updateTodo(t1, { description: "hello world" });

// Required&lt;T&gt;
const resetTodo = (todo: Todo, newTodo: Required&lt;Todo&gt;): Todo =&gt; {
 // ...
}
const t3 = resetTodo(t1, { description: "hello world" });
// Type '{ description: string; }' is missing the following properties from type 'Required&lt;Todo&gt;': title, subtitle

// Readonly&lt;T&gt;
const immutableTodo: Readonly&lt;Todo&gt; = t2;
immutableTodo.subtitle = ""
// TS2540: Cannot assign to 'subtitle' because it is a read-only property.

// Record&lt;Key, T&gt;
const obj: Record&lt;string, Todo&gt; = {
 t1: t1,
 t2: t2,
};</code></pre>
Một số kiểu utility:
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1"><code>Pick&lt;T, Keys&gt;</code> - Lấy thuộc t&iacute;nh của <code>key</code> từ type</li>
<li style="font-weight: 400;" aria-level="1"><code>Omit&lt;T, Keys&gt;</code> - Tr&aacute;i ngược với <code>Pick</code>, kiểu n&agrave;y lấy tất cả từ type thuộc t&iacute;nh trừ <code>Keys</code></li>
<li style="font-weight: 400;" aria-level="1"><code>Partial&lt;T&gt;</code> - Tương tự với <code>?</code>, c&ograve;n gọi l&agrave; <code>optional</code>, nhưng bạn kh&ocirc;ng cần phải l&agrave;m cho tất cả thuộc t&iacute;nh trở th&agrave;nh optional m&agrave; chỉ cần thực hiện đối với một số thuộc t&iacute;nh trong biến hoặc h&agrave;m.</li>
<li style="font-weight: 400;" aria-level="1"><code>Required&lt;T&gt;</code> - Tr&aacute;i ngược với <code>Partial&lt;T&gt;</code>, type phải chứa tất cả c&aacute;c thuộc t&iacute;nh bao gồm cả thuộc t&iacute;nh <code>optional</code>.</li>
<li style="font-weight: 400;" aria-level="1"><code>Readonly&lt;T&gt;</code> - Type chứa c&aacute;c thuộc t&iacute;nh l&agrave; gi&aacute; trị chỉ đọc.</li>
<li style="font-weight: 400;" aria-level="1"><code>Record&lt;Key, T&gt;</code> &nbsp;- Lựa chọn thay thế cho kiểu <code>object</code> trong TypeScript, kh&ocirc;ng n&ecirc;n sử dụng kiểu <code>object</code> bởi code sẽ thường xuất hiện d&ograve;ng <code>TypeScript2339: Property 'x' does not exist on type 'object'</code>.</li>
</ul>
Như bạn c&oacute; thể thấy, hầu hết c&aacute;c t&iacute;nh năng c&oacute; thể lồng gh&eacute;p với nhau để sao cho code hiệu quả nhất. B&agrave;i viết chỉ chọn ra một số t&iacute;nh năng ti&ecirc;u biểu nhất, bạn c&oacute; thể tham khảo t&agrave;i liệu ch&iacute;nh thức của TypeScript để đọc th&ecirc;m c&aacute;c kiểu kh&aacute;c.
<h1 style="text-align: justify;">Bổ sung - IDE dựa tr&ecirc;n Intellij&nbsp;</h1>
<img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/f4b99100-c9b3-459d-8318-8e51f43e6cd5" alt="Bổ sung - IDE dựa tr&ecirc;n Intellij&nbsp;" />
Khi muốn chuyển đổi codebase JavaScript sang TypeScript hoặc t&aacute;i cấu tr&uacute;c một codebase chứa kh&aacute; nhiều any, t&iacute;nh năng n&agrave;y sẽ hỗ trợ đắc lực cho bạn.
&nbsp;
T&agrave;i liệu tham khảo
<ul>
<li style="font-weight: 400; text-align: justify;" aria-level="1"><a href="https://www.typescriptlang.org/docs/">TypeScript Official Documentation</a></li>
</ul>

Admin

7 kiểu dữ liệu nâng cao trong TypeScript

Cùng tác giả

Admin

Có liên quan