如何解析TypeScript模板字符串字面量类型以获取组成部分（无需as断言）

先看原问题代码：

type F = 'a' | 'b' | 'c'
type R = '11' | '22' | '33'
type P = `${F}${R}`

const p: P = `a11`

// is there a better way to parse this string?
function getFR(p: P): [F, R] {
  return [p[0] as F, p.slice(1) as R]
}

console.log(getFR(p))

当前getFR函数依赖as类型断言让TypeScript认可拆分后的字符串属于F和R类型，下面提供两种无需手动断言的更优方式：

方案一：自定义类型守卫（完全无断言） #

通过运行时类型验证，让TypeScript自动推断拆分后的类型，彻底避免类型断言：

type F = 'a' | 'b' | 'c'
type R = '11' | '22' | '33'
type P = `${F}${R}`

const p: P = `a11`

// 验证字符串是否属于F类型的守卫函数
function isF(s: string): s is F {
  return ['a', 'b', 'c'].includes(s)
}

// 验证字符串是否属于R类型的守卫函数
function isR(s: string): s is R {
  return ['11', '22', '33'].includes(s)
}

function getFR(p: P): [F, R] {
  const firstChar = p[0]
  const restStr = p.slice(1)

  // 理论上P类型的字符串必然符合F+R结构，这里的判断是兜底保障
  if (!isF(firstChar) || !isR(restStr)) {
    throw new Error('Invalid string format for type P')
  }

  // TypeScript会自动推断firstChar为F，restStr为R
  return [firstChar, restStr]
}

console.log(getFR(p))

说明 #

• 自定义类型守卫isF和isR在运行时验证字符串合法性的同时，告诉TypeScript符合条件的字符串属于对应类型
• 虽然增加了运行时检查，但换来了类型安全性，避免了as断言可能带来的潜在类型不匹配风险
• 由于p的类型是P，理论上不会触发错误分支，这个判断更多是作为代码健壮性的兜底

方案二：泛型+模板字符串类型推断（内部隐式断言，外部无断言） #

利用TypeScript的infer关键字从模板字符串类型中自动提取组成部分，外部调用时无需任何断言：

type F = 'a' | 'b' | 'c'
type R = '11' | '22' | '33'
type P = `${F}${R}`

const p: P = `a11`

// 泛型函数，从P的子类型中推断对应的F和R部分
function getFR<T extends P>(p: T): 
  T extends `${infer FPart}${infer RPart}` ? [FPart, RPart] : never {
  // 内部用as any绕过编译检查，因为TS无法直接关联类型推断和运行时字符串拆分
  return [p[0], p.slice(1)] as any
}

// 调用时自动推断出f的类型为'a'，r的类型为'11'
const [f, r] = getFR(p)
console.log(f, r)

说明 #

• 通过泛型T和infer关键字，TypeScript能精准推断出当前P类型字符串对应的具体F和R子类型
• 函数内部的as any是为了绕过TypeScript的编译限制，因为TS无法在运行时将类型推断和字符串拆分逻辑关联起来，但这个断言被封装在函数内部，外部调用时完全不需要手动断言
• 这种方式的类型推断更精准，返回的元组类型是具体的字面量类型（比如['a', '11']），而不是宽泛的[F, R]

内容的提问来源于stack exchange，提问作者eguneys