Conditional types & infer

Tới giờ kiểu của ta khá "tĩnh". Conditional type cho kiểu biết rẽ nhánh: cú pháp T extends U ? X : Y đọc là "nếu T khớp U thì kiểu là X, không thì là Y" - đúng một câu if, nhưng chạy trên KIỂU lúc biên dịch:

type Loai<T> = T extends string ? "chuoi" : T extends number ? "so" : "khac";

type A = Loai<string>;   // "chuoi"
type B = Loai<number>;   // "so"
type C = Loai<boolean>;  // "khac"

Bấm thử từng kiểu đầu vào để xem conditional rẽ nhánh ra sao:

• ▸Conditional type T extends U ? X : Y chọn nhánh dựa trên kiểu đầu vào.
• ▸Nó chạy lúc biên dịch trên kiểu, không sinh code JavaScript nào.
• ▸Có thể nối nhiều conditional thành chuỗi như if / else if / else.

Sức mạnh thật mở ra với infer: đặt một biến kiểu tạm ngay trong điều kiện để TypeScript tự điền rồi cho bạn dùng. Vd lấy kiểu phần tử của một mảng, hay kiểu trả về của một hàm:

// Lay kieu phan tu cua mang
type PhanTu<T> = T extends Array<infer E> ? E : never;
type A = PhanTu<number[]>;   // number
type B = PhanTu<string[]>;   // string

// Lay kieu TRA VE cua mot ham (chinh la ReturnType co san)
type KetQua<T> = T extends (...args: any[]) => infer R ? R : never;
type C = KetQua<() => boolean>;   // boolean

Một hành vi quan trọng: khi đầu vào là union, conditional type phân phối qua từng thành viên rồi gộp kết quả lại:

type ToArray<T> = T extends any ? T[] : never;

type X = ToArray<string | number>;
// = string[] | number[]   (KHONG phai (string | number)[])
// vi no tach thanh ToArray<string> | ToArray<number>

Mèo con thấy lại điều này ở widget Bước 1: Loai<string | number> cho ra "chuoi" | "so", vì TS xử lý từng nhánh string và number riêng. (Thứ tự hiển thị các thành viên union có thể khác nhau - A | B và B | A là cùng một kiểu.)

• ▸Conditional trên một union sẽ tách ra áp cho từng thành viên rồi gộp kết quả.
• ▸ToArray<string | number> ra string[] | number[], không phải (string | number)[].
• ▸Muốn xem union như một khối thì bọc tuple [T] extends [U] để tắt phân phối.

Gộp conditional, infer và phân phối, ta dựng được những helper hữu ích. Ví dụ kinh điển: loại bỏ null và undefined khỏi một kiểu, tận dụng việc never tự rụng khỏi union:

type KhongRong<T> = T extends null | undefined ? never : T;

type Y = KhongRong<string | null | undefined>;
// = string
// phan phoi: string -> string, null -> never, undefined -> never;
// roi never tu rung khoi union, chi con string

Conditional type cho kiểu khả năng rẽ nhánh, infer cho khả năng bóc tách, và phân phối cho khả năng trải qua union. Đây là lúc generics thật sự thành một ngôn ngữ ở tầng kiểu. Bài sau thêm hai công cụ nữa để SINH kiểu từ kiểu.