TS Type Challenges · Part 7 — Template Literal Types

type Whitespace = ' ' | '\n' | '\t';

type TrimLeft<S extends string> = S extends `${Whitespace}${infer R}`
  ? TrimLeft<R>
  : S;

type TrimRight<S extends string> = S extends `${infer R}${Whitespace}`
  ? TrimRight<R>
  : S;

type Trim<S extends string> = TrimLeft<TrimRight<S>>;

Cơ chế

Ba mảnh ghép cùng nhau:

1. Union Whitespace — tham số type ở vị trí template khớp nếu ký tự tiếp theo là bất kỳ thành viên nào của union.
2. TrimLeft — mẫu `${Whitespace}${infer R}` nghĩa là “bắt đầu bằng khoảng trắng; phần còn lại vào R”.
3. TrimRight — mẫu đối xứng `${infer R}${Whitespace}`; ở đây R tham lam, lấy hết trừ ký tự trắng cuối.

Trim hợp TrimLeft<TrimRight<S>> — cắt đầu phải trước (để khoảng trắng giữa giữ nguyên), rồi duyệt đầu trái. Thứ tự ít quan trọng vì hai thao tác độc lập, nhưng TrimRight trước là lựa chọn quen từ type-challenges.

Từng dòng

type TrimLeft<S extends string> = S extends `${Whitespace}${infer R}`
  ? TrimLeft<R>   // matched → drop one leading whitespace, recurse on R
  : S;            // no leading whitespace → done

type TrimRight<S extends string> = S extends `${infer R}${Whitespace}`
  ? TrimRight<R>  // matched → drop one trailing whitespace, recurse on R
  : S;            // no trailing whitespace → done

type Trim<S extends string> = TrimLeft<TrimRight<S>>;
// TrimRight peels '  hello world  ' → '  hello world'
// TrimLeft  peels '  hello world'   → 'hello world'

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

Theo dõi Trim<' \thello '> (tab + space đầu, space cuối):

// ── TrimRight phase ──
// step 0: S = ' \thello  '
// step 1: matches `${infer R} ` with R = ' \thello ' → TrimRight<' \thello '>
// step 2: matches `${infer R} ` with R = ' \thello'  → TrimRight<' \thello'>
// step 3: no trailing space → ' \thello'

// ── TrimLeft phase ──
// step 4: S = ' \thello'
// step 5: matches ` ${infer R}` with R = '\thello'  → TrimLeft<'\thello'>
// step 6: matches `\t${infer R}` with R = 'hello'    → TrimLeft<'hello'>
// step 7: no leading whitespace → 'hello'

type Result = Trim<' \thello  '>; // 'hello'

Cạm bẫy

• Whitespace phải là union — viết ` ${infer R}` chỉ cắt space, không cắt \t hay \n.
• Khoảng trắng giữa được giữ — mẫu chỉ chạm hai đầu; ' hello world ' → 'hello world'.
• Đệ quy vô tận? — chỉ khi đệ quy mà string không ngắn lại; mỗi lần khớp bỏ đúng một ký tự, nên chắc chắn dừng.

Tóm lại: mỗi bước đệ quy bóc một khoảng trắng ở một đầu; hợp trim trái + phải.

type Replace<
  S extends string,
  From extends string,
  To extends string,
> = From extends ''
  ? S
  : S extends `${infer Head}${From}${infer Tail}`
    ? `${Head}${To}${Tail}`
    : S;

Cơ chế

1. Guard rỗng — From extends '' ? S thoát sớm trước khi khớp.
2. Nhúng literal — From xuất hiện nguyên văn trong mẫu, không nằm trong infer; compiler phải tìm đúng substring đó.
3. Head không tham lam — infer đầu lấy tiền tố tối thiểu trước khi From xuất hiện, tức đúng “lần đầu tiên”.
4. Dựng lại — `${Head}${To}${Tail}` chèn To thay chỗ From đã khớp.

Từng dòng

From extends '' ? S
// If there's nothing to find, return S unchanged (no-op)

: S extends `${infer Head}${From}${infer Tail}`
// Try to split S into [prefix][From][suffix]
// Head = minimal prefix, Tail = everything after first From

  ? `${Head}${To}${Tail}`
  // Found → rebuild with To substituted once

  : S;
  // From not found anywhere → return original string

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

Theo dõi Replace<'foobarbar', 'bar', 'foo'>:

// step 0: From = 'bar' (non-empty → proceed to match)
// step 1: pattern = `${infer Head}${'bar'}${infer Tail}` against 'foobarbar'
// step 2: Head minimal → Head = 'foo', literal 'bar' matches, Tail = 'bar'
// step 3: rebuild = `${'foo'}${'foo'}${'bar'}` = 'foofoobar'

type R = Replace<'foobarbar', 'bar', 'foo'>; // 'foofoobar'

Theo dõi ca From rỗng:

// step 0: From = '' → guard fires immediately → return S
type E = Replace<'foobarbar', '', 'foo'>; // 'foobarbar'

Cạm bẫy

• Chỉ khớp đầu — không đệ quy nên 'bar' sau trong 'foobarbar' giữ nguyên sau bước 3.
• From rỗng là tiền tố mọi vị trí — không có guard, `${infer Head}${''}${infer Tail}` khớp ở index 0 với Head = '', làm hỏng string.
• From phải là literal cụ thể — Replace<'abc', string, 'x'> không tìm “bất kỳ string”; From cố định mỗi lần instantiate.

Tóm lại: guard From rỗng, khớp `${Head}${From}${Tail}`, dựng lại một lần — không đệ quy.

type ReplaceAll<
  S extends string,
  From extends string,
  To extends string,
> = From extends ''
  ? S
  : S extends `${infer Head}${From}${infer Tail}`
    ? `${Head}${To}${ReplaceAll<Tail, From, To>}`
    : S;

Cơ chế

Cùng guard và mẫu với Replace. Chỉ đổi lời gọi đệ quy trên Tail thay vì trả kết quả phẳng:

`${Head}${To}${ReplaceAll<Tail, From, To>}`
//  ^^^^^ rebuilt prefix (done, never re-scanned)
//        ^^ inserted once
//           ^^^^^^^^^^^^^^^^^^^^^^^^^ scan continues HERE only

Mỗi lần gọi xử lý một From ở vị trí còn lại ngoài cùng bên trái; Tail thu nhỏ hoặc vẫn khớp được tới khi hết From.

Từng dòng

? `${Head}${To}${ReplaceAll<Tail, From, To>}`
// Head and To are finalized in this branch — only Tail may still contain From
// ReplaceAll<Tail, ...> is the "loop body" moving left-to-right through S

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

Theo dõi ReplaceAll<'t y p e s', ' ', ''>:

// call 1: S = 't y p e s'
//   Head = 't', From = ' ', Tail = 'y p e s'
//   partial = 't' + '' + ReplaceAll<'y p e s', ' ', ''>

// call 2: S = 'y p e s'
//   Head = 'y', Tail = 'p e s'
//   partial = 'y' + ReplaceAll<'p e s', ' ', ''>

// call 3: S = 'p e s'  → 'p' + ReplaceAll<'e s', ' ', ''>
// call 4: S = 'e s'    → 'e' + ReplaceAll<'s', ' ', ''>
// call 5: S = 's'      → no space → 's'

// unwind: 't' + 'y' + 'p' + 'e' + 's' = 'types'

type R = ReplaceAll<'t y p e s', ' ', ''>; // 'types'

Cạm bẫy

• Đệ quy trên Tail, không phải chuỗi dựng lại đầy đủ — tránh quét lại To và tránh nở vô tận khi To chứa From.
• Trái sang phải, không chồng lấn — sau khi thay một From, lần tìm tiếp bắt đầu sau nó (ngữ nghĩa replaceAll chuẩn).
• Độ sâu = số lần khớp — string rất dài với nhiều lần thay có thể chạm giới hạn độ sâu đệ quy ở bản TS cũ.

Tóm lại: Replace + ReplaceAll<Tail> — chốt phần trái, tiếp tục quét phần phải.

type StartsWith<T extends string, U extends string> = T extends `${U}${string}`
  ? true
  : false;

type EndsWith<T extends string, U extends string> = T extends `${string}${U}`
  ? true
  : false;

Cơ chế — string như ký tự đại diện

Trong mẫu template literal (vế phải của extends), type string đặc biệt: khớp bất kỳ dãy ký tự nào (kể cả rỗng). Tương đương regex .* ở tầng type.

• `${U}${string}` — “T phải bắt đầu bằng literal U, rồi gì cũng được (hoặc không gì)”.
• `${string}${U}` — “gì cũng được (hoặc không gì), rồi kết thúc bằng literal U”.

Không cần infer — bạn không trích phần nào, chỉ kiểm tra hình dạng.

Từng dòng

type StartsWith<T extends string, U extends string> = T extends `${U}${string}`
  ? true    // T fits the "U + anything" shape
  : false;  // no fit → prefix test fails

type EndsWith<T extends string, U extends string> = T extends `${string}${U}`
  ? true    // T fits the "anything + U" shape
  : false;

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

StartsWith<'abc', 'ab'>:

// step 0: does 'abc' extend `${'ab'}${string}`?
// step 1: literal 'ab' matches first two chars → remainder 'c' is assignable to string ✓
// step 2: conditional → true

type A = StartsWith<'abc', 'ab'>; // true

StartsWith<'abc', 'b'>:

// step 0: does 'abc' extend `${'b'}${string}`?
// step 1: first char is 'a', not 'b' → pattern fails
// step 2: conditional → false

type Fail = StartsWith<'abc', 'b'>; // false

EndsWith<'abc', 'bc'>:

// step 0: does 'abc' extend `${string}${'bc'}`?
// step 1: wildcard string absorbs 'a', literal 'bc' matches last two chars ✓
// step 2: true

type B = EndsWith<'abc', 'bc'>; // true

Cạm bẫy

• Wildcard string chỉ hoạt động trong mẫu — ở vế trái extends, string chỉ là type rộng, không phải bộ khớp.
• U rỗng — StartsWith<'abc', ''> là true vì `${''}${string}` khớp mọi string.
• Phân phối — nếu T là union, conditional phân phối: StartsWith<'abc' | 'ab', 'ab'> → true | true → true.

Tóm lại: `${U}${string}` / `${string}${U}` — kiểm tra tiền tố/hậu tố một dòng, không đệ quy.

type StringToTuple<S extends string> = S extends `${infer Head}${infer Tail}`
  ? [Head, ...StringToTuple<Tail>]
  : [];

type LengthOfString<S extends string> = StringToTuple<S>['length'];

Cơ chế — bắc cầu sang tuple, rồi đếm

Pipeline hai bước:

1. StringToTuple — đệ quy với `${infer Head}${infer Tail}`, prepend mỗi Head (một ký tự) vào tuple đang lớn dần.
2. LengthOfString — đọc StringToTuple<S>['length'], cùng mẹo độ dài tuple từ Phần 1.

Đây là phiên bản string của “chuyển sang tuple rồi đo” — cùng mẫu cầu như xử lý union/tuple ở Phần 6, nhưng dựng tuple thay vì union vì thứ tự quan trọng.

Từng dòng

type StringToTuple<S extends string> = S extends `${infer Head}${infer Tail}`
  ? [Head, ...StringToTuple<Tail>]  // prepend char, recurse on rest
  : [];                              // empty string → empty tuple

type LengthOfString<S extends string> = StringToTuple<S>['length'];
// Tuple ['h','e','l','l','o'] has length 5 → literal type 5

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

Theo dõi LengthOfString<'hi'>:

// call 1: S = 'hi'
//   Head = 'h', Tail = 'i'  → ['h', ...StringToTuple<'i'>]

// call 2: S = 'i'
//   Head = 'i', Tail = ''   → ['i', ...StringToTuple<''>]

// call 3: S = ''
//   → []

// unwind: StringToTuple<'hi'> = ['h', 'i']
// ['h', 'i']['length'] = 2

type R = LengthOfString<'hi'>; // 2

Theo dõi LengthOfString<'hello'>:

// StringToTuple<'hello'> = ['h', 'e', 'l', 'l', 'o']
// length = 5

type R = LengthOfString<'hello'>; // 5

Cạm bẫy

• Head là một ký tự, không phải một byte — string type TypeScript là đơn vị mã UTF-16; grapheme phức tạp có thể đếm thành nhiều phần tử tuple.
• Độ sâu đệ quy = độ dài string — literal type 1000 ký tự nghĩa là ~1000 lần mở rộng đệ quy.
• Chuỗi rỗng — StringToTuple<''> → [], và [ ]['length'] → 0.

Tóm lại: parse string thành ['h','e',...] bằng đệ quy template, rồi đọc ['length'].

type Whitespace = ' ' | '\n' | '\t';

type Trim<S extends string> = S extends
  | `${Whitespace}${infer R}`
  | `${infer R}${Whitespace}`
  ? Trim<R>
  : S;

Một mẫu union trong mệnh đề extends khớp nếu một trong hai hình dạng vừa. Bên nào có khoảng trắng sẽ bị cắt, và ta đệ quy tới khi không bên nào khớp. Một type xử lý cả hai đầu — ít tên hơn, hành vi giống nhau.

Từng bước

// Trim<' hi '>
// step 1: matches `${infer R}${Whitespace}` → R = ' hi' → Trim<' hi'>
// step 2: matches `${Whitespace}${infer R}` → R = 'hi'  → Trim<'hi'>
// step 3: no match → 'hi'

Chuỗi rỗng là tiền tố của mọi vị trí. Không có guard, `${infer Head}${''}${infer Tail}` khớp ngay đầu với Head = '' và Tail = S, chèn To ở vị trí 0 và làm hỏng kết quả. Trong ReplaceAll, điều đó sẽ đệ quy vô tận, chèn To lặp lại. Guard biến “thay không có gì” thành no-op đúng đắn.