TypeScript Type Challenges — Explained, with Toggle-to-Reveal Answers

type MyPick<T, K extends keyof T> = {
  [P in K]: T[P];
};

Từng bước:

1. keyof T tạo union các key của T.
2. K extends keyof T là ràng buộc: bảo đảm chỉ truyền được key thật sự có trên T.
3. { [P in K]: ... } là mapped type: nó duyệt từng phần tử P của union K.
4. T[P] là indexed access — “type của thuộc tính P trên T”.

Kết quả là object chỉ chứa các key đã chọn, mỗi key giữ type gốc.

type MyReadonly<T> = {
  readonly [P in keyof T]: T[P];
};

Từng bước:

1. Lần này map qua mọi key: [P in keyof T].
2. Copy nguyên type mỗi value bằng T[P].
3. Phần mới: modifier readonly trước key áp cho mọi thuộc tính.

Nên biết: Modifier cũng bỏ được. -readonly gỡ readonly, -? biến optional thành bắt buộc.

type TupleToObject<T extends readonly (string | number | symbol)[]> = {
  [P in T[number]]: P;
};

Khái niệm cốt lõi — T[number]:

Một tuple như ['a', 'b'] có thể lập chỉ mục theo vị trí (T[0] là 'a'). Nhưng nếu lập chỉ mục bằng type number thay vì một số cụ thể, TypeScript trả về type của bất kỳ vị trí nào — tức union của mọi phần tử. Vậy T[number] ở đây là 'tesla' | 'model 3' | 'model x'.

Rồi ta map qua union đó, dùng mỗi phần tử P làm cả key lẫn value. Ràng buộc (string | number | symbol)[] là bắt buộc vì chỉ các type đó mới là key object hợp lệ.

type First<T extends any[]> = T extends [infer F, ...any[]] ? F : never;

Từng bước:

1. [infer F, ...any[]] là mẫu tuple. Đọc là: “tuple có ô đầu là một type nào đó — bắt làm F — rồi theo sau là bao nhiêu phần tử khác cũng được”.
2. Với [3, 2, 1], mẫu khớp và F bắt được là 3.
3. Với [] không có phần tử đầu nên mẫu thất bại, rơi xuống never.

Tại sao là never chứ không phải undefined? Vì ở tầng type, “không tồn tại phần tử nào” được biểu diễn tốt nhất bằng never — type không có giá trị nào.

type Length<T extends readonly any[]> = T['length'];

Khái niệm — tuple biết độ dài của chính nó:

Type tuple lưu độ dài dưới dạng number literal trong thuộc tính ẩn length. ['a','b','c']['length'] đúng là 3, không phải number chung chung.

Indexed access T['length'] đọc literal đó. Lưu ý: mảng thường như string[] có length: number (kích thước bất kỳ), nên mẹo này chỉ cho số chính xác với tuple, không phải mảng mở.

type Concat<T extends readonly any[], U extends readonly any[]> = [...T, ...U];

Khái niệm — variadic tuple (spread tuple):

Giống spread mảng ở tầng giá trị với [...a, ...b], bạn spread được type tuple y như vậy ở tầng type. [...T, ...U] trải mọi phần tử của T rồi tới U thành một tuple mới, giữ nguyên thứ tự và literal type.

Đây là nền cho hầu hết bài thao tác tuple (Push, Unshift, Reverse, …).

type MyExclude<T, U> = T extends U ? never : T;

Khái niệm lớn — distributive conditional type:

Dòng này chạy được nhờ một quy tắc đặc biệt: khi type được kiểm tra (vế trái extends) là tham số trần (chỉ T, không bọc) và là union, conditional được áp cho từng phần tử riêng, rồi gộp kết quả lại.

Xem nó bung ra với 'a' | 'b' | 'c' loại 'a':

// distributes into three independent checks:
('a' extends 'a' ? never : 'a')   // → never
| ('b' extends 'a' ? never : 'b') // → 'b'
| ('c' extends 'a' ? never : 'c') // → 'c'
// = never | 'b' | 'c'
// = 'b' | 'c'   (never vanishes from a union)

Hai điều cần nhớ: distribution cần tham số trần (bọc [T] sẽ tắt), và never luôn biến mất khỏi union.

type MyAwaited<T extends PromiseLike<any>> =
  T extends PromiseLike<infer V>
    ? V extends PromiseLike<any>
      ? MyAwaited<V>
      : V
    : never;

Từng bước:

1. T extends PromiseLike<infer V> khớp một promise và bắt type đã resolve vào V.
2. Rồi hỏi: bản thân V có lại là promise không? Nếu có → đệ quy: gọi MyAwaited<V> để bóc lớp tiếp. Nếu không → đã tới giá trị thật, trả về V (đây là base case dừng đệ quy).

Với Promise<Promise<string>>: lần đầu V = Promise<string> (vẫn là promise → đệ quy), lần sau V = string (không phải promise → trả string). Mọi đệ quy phải có base case, nếu không type sẽ bung vô tận.

type MyReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

Khái niệm — infer hoạt động ở bất kỳ vị trí nào trong mẫu:

Ta khớp T với hình dạng hàm tổng quát: (...args: any[]) => infer R. (...args: any[]) nghĩa là “nhận tham số bất kỳ — ta không quan tâm”. Phần thú vị là infer R đặt ở vị trí return, bắt giá trị hàm trả về.

Bài học: bạn có thể đặt infer vào bất kỳ ô nào của mẫu — tham số, return, phần tử mảng, nội dung promise — để rút đúng phần bạn cần.

type MyOmit<T, K extends keyof T> = {
  [P in keyof T as P extends K ? never : P]: T[P];
};

Khái niệm — đổi key bằng as:

Mapped type đổi tên key được bằng as: [P in keyof T as NewKey]. Mẹo then chốt: nếu đổi một key thành never, key đó bị loại khỏi kết quả.

Vậy ta duyệt mọi key P của T và tính key mới:

P extends K ? never : P
// if P is one of the keys to omit → never (drops it)
// otherwise → keep P unchanged

'title' và 'completed' giữ lại, 'description' map thành never và biến mất.

type DeepReadonly<T> = {
  readonly [K in keyof T]: T[K] extends Record<string, unknown>
    ? DeepReadonly<T[K]>
    : T[K];
};

Từng bước:

1. Bắt đầu như Readonly thường: map mọi key và thêm readonly.
2. Với mỗi value, quyết định có đào sâu hơn không. Phép thử T[K] extends Record<string, unknown> hỏi “value này có phải object thuần không?”. Object → đệ quy với DeepReadonly<T[K]> để object lồng cũng readonly. Hàm hoặc primitive → không khớp Record<string, unknown>, nên trả về nguyên.

Đây là đệ quy trên cấu trúc dữ liệu (cây object) chứ không phải danh sách — base case là “value không phải object”.

type TupleToUnion<T extends readonly any[]> = T[number];

Khái niệm — tái dùng T[number]:

Cùng ý tưởng trong Tuple to Object. Lập chỉ mục type tuple bằng type number hỏi “type ở bất kỳ chỉ mục nào?”, và đáp án là union mọi phần tử. Vậy [123, '456', true][number] là 123 | '456' | true.

Nhận ra những mẫu nhỏ tái dùng được như vậy là một nửa của việc giỏi type challenges.

type MyCapitalize<S extends string> = S extends `${infer First}${infer Rest}`
  ? `${Uppercase<First>}${Rest}`
  : S;

Khái niệm — tách string bằng template literal:

`${infer First}${infer Rest}` là một mẫu string. TypeScript khớp sao cho First lấy một ký tự và Rest lấy phần còn lại. Với 'hello world': First = 'h', Rest = 'ello world'.

Rồi dùng intrinsic có sẵn Uppercase<> lên đúng ký tự đầu và dán string lại. Chuỗi rỗng '' không khớp mẫu hai phần nên rơi xuống S nguyên — đó là base case.

type Permutation<T, K = T> = [T] extends [never]
  ? []
  : K extends K
    ? [K, ...Permutation<Exclude<T, K>>]
    : never;

Bài này gộp hai mẹo nâng cao. Đi từng cái:

Mẹo 1 — giữ bản sao của union với K = T. Ta đặt mặc định tham số thứ hai K = T. Cần vậy vì dòng K extends K cố tình kích hoạt distribution trên K, và ta muốn một tham chiếu ổn định tới toàn bộ union gốc (T) để trừ đi.

Mẹo 2 — [T] extends [never] để phát hiện union rỗng. Cần base case: khi không còn gì để hoán vị, trả []. Nhưng không thể viết T extends never ? ... trực tiếp, vì nếu T là union (hoặc never) nó sẽ distribute và sai. Bọc cả hai vế trong tuple, [T] extends [never], tắt distribution để có phép kiểm tra đúng.

Ghép lại: K extends K distribute trên từng phần tử K. Với mỗi cái, ta đặt K lên đầu và đệ quy trên phần còn lại Exclude<T, K>:

// for 'A' | 'B' | 'C':
['A', ...Permutation<'B' | 'C'>]  // → ['A','B','C'] | ['A','C','B']
| ['B', ...Permutation<'A' | 'C'>] // → ['B','A','C'] | ['B','C','A']
| ['C', ...Permutation<'A' | 'B'>] // → ['C','A','B'] | ['C','B','A']

type UnionToIntersection<U> = (
  U extends any ? (arg: U) => void : never
) extends (arg: infer I) => void
  ? I
  : never;

Bài kinh điển. Mẹo nằm ở contravariance (nghịch biến).

Khái niệm nền — tính nghịch biến của tham số hàm. Vị trí tham số hàm là nghịch biến: hàm nhận A chỉ tương thích với nơi mong đợi A hoặc cụ thể hơn. Khi TypeScript phải tìm một type tham số thoả nhiều type hàm cùng lúc, nó gộp bằng & (intersection), không phải |.

Từng bước:

1. distribute U thành union các hàm.
2. Rồi ta infer I làm type tham số duy nhất từ cả union hàm đó.
3. Nhờ nghịch biến, I duy nhất hợp cho cả hai hàm là intersection {a:1} & {b:2}.

Không cần tự suy lại mỗi lần — nhận ra hình dạng (U extends any ? (arg: U) => void : never) là “đồ nghề” chuẩn cho “union → intersection”.

type CamelCase<S extends string> = S extends `${infer Head}-${infer Tail}`
  ? Tail extends Capitalize<Tail>
    ? `${Head}-${CamelCase<Tail>}`
    : `${Head}${CamelCase<Capitalize<Tail>>}`
  : S;

Từng bước:

1. tách string ở dấu gạch đầu tiên. Với 'foo-bar-baz': Head = 'foo', Tail = 'bar-baz'.
2. Phép kiểm tra trong Tail extends Capitalize<Tail> xử lý ca hai dấu gạch. Nếu Tail đã viết hoa, tức ký tự sau dấu gạch là một dấu gạch nữa. Khi đó giữ dấu gạch và đệ quy.
3. Ngược lại (ca thường) viết hoa chữ đầu của Tail và đệ quy bỏ dấu gạch.
4. Khi hết dấu gạch, mẫu thất bại và trả về S — base case.

Lần theo 'foo-bar-baz': foo + Camel(Bar-baz) → foo + Bar + Camel(Baz) → fooBarBaz.