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

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

Step by step {Từng bước}:

1. keyof T produces the union of T’s keys — here 'title' | 'description' | 'completed' {keyof T tạo union các key của T}.
2. K extends keyof T is a constraint: it guarantees callers can only pass keys that actually exist on T. Pass 'foo' and you get a compile error {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]: ... } is a mapped type: it walks through each member P of the union K (so P is 'title', then 'completed') {{ [P in K]: ... } là mapped type: nó duyệt từng phần tử P của union K}.
4. T[P] is indexed access — “the type of property P on T”. For 'title' that’s string {T[P] là indexed access — “type của thuộc tính P trên T”}.

So we rebuild an object containing only the chosen keys, each keeping its original value type {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];
};

Step by step {Từng bước}:

1. We map over all keys this time: [P in keyof T] {Lần này map qua mọi key: [P in keyof T]}.
2. We copy each value type unchanged with T[P] {Copy nguyên type mỗi value bằng T[P]}.
3. The new part: the readonly modifier in front of the key applies it to every property {Phần mới: modifier readonly trước key áp cho mọi thuộc tính}.

Good to know {Nên biết}: modifiers can be removed too. -readonly strips readonly, and -? makes optional properties required — useful in challenges like a Mutable<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;
};

The key concept — T[number] {Khái niệm cốt lõi — T[number]}:

A tuple like ['a', 'b'] can be indexed by a specific position (T[0] is 'a') {Một tuple như ['a', 'b'] có thể lập chỉ mục theo vị trí (T[0] là 'a')}. But if you index by the type number instead of a single number, TypeScript returns the type of any position — i.e. the union of all elements {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ử}. So T[number] here is 'tesla' | 'model 3' | 'model x' {Vậy T[number] ở đây là 'tesla' | 'model 3' | 'model x'}.

We then map over that union, using each member P as both the key and the value {Rồi ta map qua union đó, dùng mỗi phần tử P làm cả key lẫn value}. The constraint (string | number | symbol)[] (the PropertyKey types) is required because only those types are valid object keys {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;

Step by step {Từng bước}:

1. [infer F, ...any[]] is a tuple pattern. It reads: “a tuple whose first slot is some type — capture it as F — followed by any number of other elements” {[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. For [3, 2, 1] the pattern matches and F is captured as 3 {Với [3, 2, 1], mẫu khớp và F bắt được là 3}.
3. For [] there is no first element, so the pattern fails and we fall to never {Với [] không có phần tử đầu nên mẫu thất bại, rơi xuống never}.

Why never and not undefined? {Tại sao là never chứ không phải undefined?} Because at the type level “no such element exists” is best represented by never — the type with no values {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'];

The concept — tuples know their own length {Khái niệm — tuple biết độ dài của chính nó}:

A tuple type stores its length as a literal number in a hidden length property. ['a','b','c']['length'] is exactly 3, not the general number {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'] reads that literal {Indexed access T['length'] đọc literal đó}. Important caveat: a regular array like string[] has length: number (it could be any size), so this trick only gives a precise number for tuples, not open-ended arrays {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];

The concept — variadic (spread) tuple types {Khái niệm — variadic tuple (spread tuple)}:

Just like you spread arrays in values with [...a, ...b], you can spread tuple types the same way at the type level {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] lays out every element of T then every element of U into one new tuple, preserving order and literal types {[...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}.

This is the foundation for most tuple manipulation challenges (Push, Unshift, Reverse, …) {Đâ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;

The big concept — distributive conditional types {Khái niệm lớn — distributive conditional type}:

This one-liner only works because of a special rule {Dòng này chạy được nhờ một quy tắc đặc biệt}: when the type being checked (the left side of extends) is a bare type parameter (just T, not wrapped) and it’s a union, the conditional is applied to each member separately, then the results are unioned back {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}.

Watch it unfold for 'a' | 'b' | 'c' excluding 'a' {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)

Two facts to remember {Hai điều cần nhớ}: distribution needs a bare parameter (wrapping in [T] turns it off), and never always disappears from a union {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;

Step by step {Từng bước}:

1. T extends PromiseLike<infer V> matches a promise and captures its resolved type as V {T extends PromiseLike<infer V> khớp một promise và bắt type đã resolve vào V}.
2. Then we ask: is V itself another promise? {Rồi hỏi: bản thân V có lại là promise không?}
   • If yes → recurse: call MyAwaited<V> to peel the next layer {Nếu có → đệ quy: gọi MyAwaited<V> để bóc lớp tiếp}.
   • If no → we’ve reached the real value, return V (this is the base case that stops recursion) {Nếu không → đã tới giá trị thật, trả về V (đây là base case dừng đệ quy)}.

For Promise<Promise<string>>: first V = Promise<string> (still a promise → recurse), then V = string (not a promise → return string) {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)}. Every recursion must have a base case, or the type would expand forever {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;

The concept — infer works anywhere in the pattern {Khái niệm — infer hoạt động ở bất kỳ vị trí nào trong mẫu}:

We match T against a generic function shape: (...args: any[]) => infer R {Ta khớp T với hình dạng hàm tổng quát: (...args: any[]) => infer R}. (...args: any[]) means “accepts any arguments — we don’t care about them” {(...args: any[]) nghĩa là “nhận tham số bất kỳ — ta không quan tâm”}. The interesting part is infer R placed in the return-type position, which captures whatever the function returns {Phần thú vị là infer R đặt ở vị trí return, bắt giá trị hàm trả về}.

The lesson: you can drop infer into any slot of the pattern — parameters, return type, array elements, promise contents — to extract exactly the piece you want {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];
};

The concept — key remapping with as {Khái niệm — đổi key bằng as}:

A mapped type can rename keys using as: [P in keyof T as NewKey] {Mapped type đổi tên key được bằng as: [P in keyof T as NewKey]}. The crucial trick: if you remap a key to never, that key is dropped from the result {Mẹo then chốt: nếu đổi một key thành never, key đó bị loại khỏi kết quả}.

So we go through every key P of T and compute a new key {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

For Omit<Todo, 'description'>: 'title' and 'completed' stay, 'description' maps to never and disappears {'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];
};

Step by step {Từng bước}:

1. Start like plain Readonly: map over every key and add readonly {Bắt đầu như Readonly thường: map mọi key và thêm readonly}.
2. For each value, decide whether to dive deeper {Với mỗi value, quyết định có đào sâu hơn không}. The test T[K] extends Record<string, unknown> asks “is this value a plain object?” {Phép thử T[K] extends Record<string, unknown> hỏi “value này có phải object thuần không?”}.
   • Object → recurse with DeepReadonly<T[K]> so nested objects also become readonly {Object → đệ quy với DeepReadonly<T[K]> để object lồng cũng readonly}.
   • Function or primitive (string, boolean, a function type, …) → it doesn’t match Record<string, unknown>, so we return it unchanged {Hàm hoặc primitive → không khớp Record<string, unknown>, nên trả về nguyên}.

This is recursion over a data structure (the object tree) rather than over a list — the base case is “the value isn’t an object” {Đâ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];

The concept — reuse T[number] {Khái niệm — tái dùng T[number]}:

Same idea you saw in Tuple to Object {Cùng ý tưởng trong Tuple to Object}. Indexing a tuple type with the number type asks “what is the type at any index?”, and the answer is the union of every element {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ử}. So [123, '456', true][number] is 123 | '456' | true {Vậy [123, '456', true][number] là 123 | '456' | true}.

Recognizing this small reusable pattern is half of getting good at type challenges {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;

The concept — splitting strings with template literals {Khái niệm — tách string bằng template literal}:

`${infer First}${infer Rest}` is a string pattern {`${infer First}${infer Rest}` là một mẫu string}. TypeScript matches it greedily so that First grabs one character and Rest grabs everything after {TypeScript khớp sao cho First lấy một ký tự và Rest lấy phần còn lại}. For 'hello world': First = 'h', Rest = 'ello world' {Với 'hello world': First = 'h', Rest = 'ello world'}.

Then we use the built-in intrinsic Uppercase<> on just the first character and glue the string back together: `${Uppercase<'h'>}${'ello world'}` → 'Hello world' {Rồi dùng intrinsic có sẵn Uppercase<> lên đúng ký tự đầu và dán string lại}. The empty string '' doesn’t match the two-part pattern, so it falls through to S unchanged — that’s the base case {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;

This combines two advanced tricks. Take them one at a time {Bài này gộp hai mẹo nâng cao. Đi từng cái}:

Trick 1 — keeping a copy of the union with K = T {Mẹo 1 — giữ bản sao của union với K = T}. We default a second parameter K to T. We need this because the next line, K extends K, deliberately triggers distribution over K, and we want a stable reference to the whole original union (T) to subtract from {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}.

Trick 2 — [T] extends [never] to detect the empty union {Mẹo 2 — [T] extends [never] để phát hiện union rỗng}. We need a base case: when there’s nothing left to permute, return [] {Cần base case: khi không còn gì để hoán vị, trả []}. But you cannot write T extends never ? ... directly, because if T is a union (or never) it distributes and misbehaves {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}. Wrapping both sides in a tuple, [T] extends [never], turns distribution off so we get a plain, correct check {Bọc cả hai vế trong tuple, [T] extends [never], tắt distribution để có phép kiểm tra đúng}.

Putting it together {Ghép lại}: K extends K distributes over each member K. For each one we place K at the front and recurse on the remaining members Exclude<T, K> {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;

This is the famous one. The trick is contravariance {Bài kinh điển. Mẹo nằm ở contravariance (nghịch biến)}.

Background concept — contravariance of function parameters {Khái niệm nền — tính nghịch biến của tham số hàm}. Function parameter positions are contravariant: a function that accepts A is compatible only with code expecting A or something more specific. When TypeScript must find one parameter type that satisfies several function types at once, it combines them with & (intersection), not | {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 |}.

Step by step {Từng bước}:

1. U extends any ? (arg: U) => void : never distributes U into a union of functions: ((arg: {a:1}) => void) | ((arg: {b:2}) => void) {distribute U thành union các hàm}.
2. We then try to infer I as the single parameter type from that whole union of functions: ... extends (arg: infer I) => void {Rồi ta infer I làm type tham số duy nhất từ cả union hàm đó}.
3. Because of contravariance, the only I that works for both functions is the intersection {a:1} & {b:2} {Nhờ nghịch biến, I duy nhất hợp cho cả hai hàm là intersection {a:1} & {b:2}}.

You don’t need to derive this from scratch each time — recognize the (U extends any ? (arg: U) => void : never) shape as the canonical “union → intersection” gadget {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;

Step by step {Từng bước}:

1. `${infer Head}-${infer Tail}` splits the string at the first dash {tách string ở dấu gạch đầu tiên}. For 'foo-bar-baz': Head = 'foo', Tail = 'bar-baz' {Với 'foo-bar-baz': Head = 'foo', Tail = 'bar-baz'}.
2. The inner check Tail extends Capitalize<Tail> handles the tricky double-dash case {Phép kiểm tra trong Tail extends Capitalize<Tail> xử lý ca hai dấu gạch}. If Tail is already capitalized, it means the character after the dash was another dash (e.g. 'foo--bar' → Tail = '-bar', and Capitalize<'-bar'> is still '-bar') {Nếu Tail đã viết hoa, tức ký tự sau dấu gạch là một dấu gạch nữa}. In that case we keep the literal dash and recurse: `${Head}-${CamelCase<Tail>}` {Khi đó giữ dấu gạch và đệ quy}.
3. Otherwise (the normal case) we capitalize the first letter of Tail and recurse without the dash: `${Head}${CamelCase<Capitalize<Tail>>}` {Ngược lại (ca thường) viết hoa chữ đầu của Tail và đệ quy bỏ dấu gạch}.
4. When no dash remains, the pattern fails and we return S — the base case {Khi hết dấu gạch, mẫu thất bại và trả về S — base case}.

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