TS Type Challenges · Part 6 — Union Manipulation

Đây là Phần 6 của series 12 bài về TypeScript type challenges. Tuple có thứ tự và vị trí; union thì không. Bạn không thể viết U[0] trên union. Nên thao tác union cần công cụ khác: distribution để thăm từng phần tử, và một đồ nghề contravariance khôn khéo để rút từng phần tử ra.

Ghi nguồn: các đáp án theo type-challenges (giấy phép MIT); số khớp ID chính thức.

531 · String to Union

Tách một string type thành union các ký tự.

type R = StringToUnion<'hello'>; // 'h' | 'e' | 'l' | 'l' | 'o'  (= 'h'|'e'|'l'|'o')

Vì sao không hiển nhiên

Một string literal như 'hello' là một type duy nhất, không phải tuple gồm năm type ký tự. Bạn không thể index vào nó như index tuple — không có S[0] ở tầng type. Mục tiêu là phân rã một chuỗi thành tập các literal ký tự nối bằng |. Việc phân rã đó phải qua khớp mẫu, không phải truy cập theo vị trí.

Cách làm ngây thơ

Bạn có thể thử dựng tuple trước rồi chuyển đổi — hoặc đệ quy bằng spread như các bài tuple:

// ❌ Wrong direction — builds a tuple, not a union
type Naive<S extends string> = S extends `${infer H}${infer T}`
  ? [H, ...Naive<T>]
  : [];

type Bad = Naive<'hi'>; // ['h', 'i'] — ordered list, not a union

Kết quả là ['h', 'i'], giữ thứ tự và trùng lặp. Bài yêu cầu 'h' | 'i' — một union, nơi trùng lặp gộp lại và không có thứ tự. Cách sửa không nằm ở khung đệ quy (đầu + đuôi) mà ở toán tử kết hợp mỗi bước: | thay cho [..., ...].

type StringToUnion<T extends string> = T extends `${infer Head}${infer Tail}`
  ? Head | StringToUnion<Tail>
  : never;

// step 1: T = 'hi' — matches `${infer Head}${infer Tail}`
//   Head = 'h', Tail = 'i'
type Step1 = 'h' | StringToUnion<'i'>;

// step 2: T = 'i'
//   Head = 'i', Tail = ''
type Step2 = 'h' | ('i' | StringToUnion<''>);

// step 3: T = '' — does NOT match `${infer Head}${infer Tail}`
//   falls to never
type Step3 = 'h' | ('i' | never);

// step 4: 'i' | never  →  'i'
type Step4 = 'h' | 'i';

// final
type R = 'h' | 'i';

Ôn lại — distribution thăm từng phần tử

Bạn đã biết từ Phần 3, nhưng đây là cốt lõi của việc xử lý union nên hãy neo lại với một đánh giá đầy đủ.

type Box<U> = U extends any ? [U] : never;
type R = Box<'a' | 'b'>; // ['a'] | ['b']  (NOT ['a' | 'b'])

Vì sao không hiển nhiên

Khi viết U extends any ? [U] : never, bạn có thể kỳ vọng compiler bọc cả union trong một tuple: ['a' | 'b']. Thay vào đó bạn nhận ['a'] | ['b'] — hai type tuple riêng nối bằng |. Conditional phân phối qua các phần tử union khi type được kiểm tra (U) là tham số type trần.

Cách làm ngây thơ

Không có trigger extends any, conditional trên union không luôn phân phối như bạn muốn:

// ❌ Non-distributive — U is wrapped in a tuple
type NoDistribute<U> = [U] extends [any] ? [U] : never;
type Stuck = NoDistribute<'a' | 'b'>; // ['a' | 'b'] — whole union, one box

Dấu ngoặc [U] chặn phân phối: compiler thấy một type union, không phải hai lần kiểm tra riêng. Thành ngữ U extends any ? … : … giữ U trần bên trái, nên mỗi phần tử được thăm độc lập.

Cơ chế

U extends any ? [U] : never nghĩa là: với mỗi phần tử M của U, nếu M extends any (luôn đúng), sinh [M]; rồi hợp tất cả kết quả. Ta dùng any vì nó khớp mọi type, nên nhánh true luôn chạy — mục đích là phân phối, không phải lọc.

Đánh giá type từng bước

// Given: Box<'a' | 'b'>

// step 1: distribute — compiler rewrites as two conditionals
//   ('a' extends any ? ['a'] : never) | ('b' extends any ? ['b'] : never)

// step 2: evaluate each branch — both extend any, so both take true branch
//   ['a'] | ['b']

type R = ['a'] | ['b'];

Cạm bẫy

• boolean thực ra là union — boolean = true | false, nên Box<boolean> phân phối thành [true] | [false].
• Thứ tự không được bảo đảm — 'a' | 'b' và 'b' | 'a' là cùng một union; thứ tự phân phối theo compiler, không theo thứ tự bạn viết.
• Bọc ngoặc chặn phân phối — [U] extends [any] và U extends [any] khác nhau; mẹo dấu ngoặc ở Phần 3 là cách tắt phân phối khi cần.

Tóm lại: U extends any ? … : … là thành ngữ “chạy một lần cho mỗi phần tử union”. Tiếp theo ta dùng nó để biến phần tử union thành hàm.

Phần tử cuối của một union

Union không có “phần tử cuối”, nhưng ta có thể buộc compiler chọn một bằng contravariance. Đây là động cơ phía sau UnionToTuple.

type R = LastInUnion<1 | 2>; // 2

Vì sao không hiển nhiên

Bạn không thể viết U[LastIndex] hay “cho tôi phần tử cuối của union này” — union là tập không thứ tự. Bạn cũng không thể infer một phần tử duy nhất từ union trần bằng một conditional. Mẹo là diễn đạt lại bài toán: biến mỗi phần tử thành hàm, gộp union hàm thành intersection, rồi đọc lại type tham số.

Cách làm ngây thơ

// ❌ Distribution gives you ALL members, not one
type PickAny<U> = U extends infer L ? L : never;
type Messy = PickAny<1 | 2>; // 1 | 2 — still the whole union

// ❌ No "last" keyword exists
type Wishful<U> = U extends any ? U[number] : never; // U[number] on a union is just U again

Phân phối với infer cho union của mọi thứ nó thăm — ngược với “chọn đúng một”. Ta cần cơ chế gộp union thành dạng mà chỉ một phần tử sống sót qua suy luận.

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

type LastInUnion<U> =
  UnionToIntersection<U extends any ? (x: U) => void : never> extends (
    x: infer L,
  ) => void
    ? L
    : never;

// step 1: distribute U extends any ? (x: U) => void : never
//   →  (x: 1) => void  |  (x: 2) => void
type Fns = (x: 1) => void | (x: 2) => void;

// step 2: UnionToIntersection collapses the function union
//   →  ((x: 1) => void) & ((x: 2) => void)
//   (one callable type with two overload signatures)
type Intersected = ((x: 1) => void) & ((x: 2) => void);

// step 3: Intersected extends (x: infer L) => void ?
//   overload resolution: last signature wins → L = 2
type L = 2;

type R = 2;

730 · Union to Tuple

Chuyển một union thành tuple các phần tử. (Thứ tự không được spec bảo đảm, nhưng test chấp nhận thứ tự ổn định của compiler.)

type R = UnionToTuple<1 | 2 | 3>; // [1, 2, 3]

Vì sao không hiển nhiên

Tuple là danh sách có thứ tự; union là túi không thứ tự. Không có UnionToTuple sẵn trong thư viện chuẩn. Bạn phải tạo ra thứ tự bằng cách lặp rút một phần tử, ghi lại, rồi đệ quy trên phần còn lại. Điều đó cần hai kỹ năng phụ từ các phần trước: bóc phần tử cuối (LastInUnion) và phát hiện union rỗng ([U] extends [never]).

Cách làm ngây thơ

// ❌ Distribution builds a union of singleton tuples, not one tuple
type Naive<U> = U extends any ? [U] : never;
type Wrong = Naive<1 | 2 | 3>; // [1] | [2] | [3] — still a union!

// ❌ No way to "append" across a union
type AlsoWrong<U, Acc extends unknown[] = []> = U extends any
  ? [...Acc, U] // Acc is shared — does not fold into one tuple
  : never;

Ánh xạ mỗi phần tử thành [U] cho union các tuple một phần tử, không phải một tuple nhiều phần tử. Cách sửa là loại trừ đệ quy: bóc một phần tử đã biết, tuple phần còn lại, nối phần tử vừa bóc vào cuối.

type UnionToTuple<U, Last = LastInUnion<U>> = [U] extends [never]
  ? []
  : [...UnionToTuple<Exclude<U, Last>>, Last];

// ── Round 1: U = 1 | 2 ──
// step 1: Last = LastInUnion<1 | 2>  →  2
// step 2: [1 | 2] extends [never]?  →  false (not empty)
// step 3: Exclude<1 | 2, 2>  →  1
// step 4: [...UnionToTuple<1>, 2]

// ── Round 2: U = 1 ──
// step 5: Last = LastInUnion<1>  →  1
// step 6: [1] extends [never]?  →  false
// step 7: Exclude<1, 1>  →  never
// step 8: [...UnionToTuple<never>, 1]

// ── Round 3: U = never ──
// step 9: [never] extends [never]?  →  true
// step 10: UnionToTuple<never>  →  []

// ── Unwind ──
// step 11: UnionToTuple<1>  →  [...[], 1]  →  [1]
// step 12: UnionToTuple<1 | 2>  →  [...[1], 2]  →  [1, 2]

type R = [1, 2];

Đếm số phần tử của union

Một phần thưởng rơi thẳng từ UnionToTuple: một khi có tuple, độ dài của nó là kích thước union.

type UnionLength<U> = UnionToTuple<U>['length'];
type R = UnionLength<'a' | 'b' | 'c'>; // 3

Vì sao cách này chạy

Đếm phần tử của union trần không có toán tử trực tiếp — không có U.size. Nhưng tuple có thuộc tính length ở tầng type (một number literal). Bắc cầu union → tuple → đọc ['length'].

Đánh giá type từng bước

// step 1: UnionToTuple<'a' | 'b' | 'c'>  →  ['a', 'b', 'c']  (stable order)
// step 2: ['a', 'b', 'c']['length']  →  3

type R = 3;

Cạm bẫy

• Kế thừa cảnh báo thứ tự của UnionToTuple — nếu thứ tự không ổn định, độ dài vẫn đúng nhưng nội dung tuple không dùng để hiển thị.
• boolean đếm là 2 — UnionLength<boolean> là 2, không phải 1, vì boolean = true | false.

Đây là chiêu hay gặp: khi câu hỏi về union khó, chuyển sang tuple, giải ở đó, rồi chuyển lại nếu cần. Tuple đơn giản là dễ duyệt hơn.

Tóm lại: UnionToTuple<U>['length'] biến “bao nhiêu phần tử?” thành “tuple dài bao nhiêu?”.

Bài tập

1. Viết Count<U> trả số phần tử của union dưới dạng number literal.

type Count<U> = UnionToTuple<U>['length'];

2. Vì sao LastInUnion cho phần tử cuối chứ không phải đầu hay bất kỳ?

// Intersection of two call signatures behaves like:
type Overloaded = {
  (x: 1): void;
  (x: 2): void;
};
// infer L from (x: infer L) => void against Overloaded → L = 2 (last wins)

Nâng cao:spec không bảo đảm thứ tự union. Dựng một ví dụ nhỏ và suy nghĩ vì sao dựa vào thứ tự trong code production là rủi ro.

type A = UnionToTuple<1 | 2 | 3>;
type B = UnionToTuple<3 | 1 | 2>; // same members, different source order
// A and B are typically identical — order is compiler-defined, not author-defined

Điểm chính

• Đệ quy có thể dựng union (kết hợp |) y như dựng tuple (kết hợp spread).
• U extends any ? … : … là thành ngữ “làm điều này với từng phần tử union”.
• never là union rỗng — biến mất trong X | never và báo hiệu “dừng tích lũy” trong builder đệ quy.
• UnionToIntersection + infer trên kết quả rút phần tử cuối của union, tất định.
• UnionToTuple = bóc Last, Exclude nó, đệ quy — chặn bởi [U] extends [never].
• Khi union khó xử, bắc cầu sang tuple, giải, rồi quay lại.

Tiếp theo

Phần 7 — Template Literal Type: tính toán chuỗi ở tầng type. Ta dựng Trim, Replace, ReplaceAll, StartsWith/EndsWith, LengthOfString, dựa vào mẫu tách-rồi-đệ-quy vừa dùng để biến string thành union.