TypeScript中如何将number类型转为string类型？解决索引类型报错

问题代码 #

interface Endpoints {
  [k: string]: any
}
type UseXQueryPattern<E extends string> = `use${Capitalize<E>}Query`
interface QueryHooks {
  [key: UseXQueryPattern<keyof Endpoints>]: any
}

编译错误 #

Type 'string | number' does not satisfy the constraint 'string'.
  Type 'number' is not assignable to type 'string'.ts(2344)

问题说明 #

尽管Endpoints接口声明了字符串索引签名，且JavaScript会自动将对象的数字键转换为字符串，但TypeScript仍抛出类型约束错误。需要在类型层面实现类似JavaScript中.toString()的效果，将number类型转换为对应的string类型。

解决方案 #

TypeScript中，keyof作用于带字符串索引的接口时，默认返回string | number | symbol联合类型。要将其中的数字类型转为字符串类型，可利用模板字面量类型实现类型层面的转换：

方案一：通用类型工具

先定义类型工具处理联合类型中的数字，再应用到代码中：

interface Endpoints {
  [k: string]: any
}

// 定义类型工具，将数字转为对应字符串，保留原有字符串类型
type KeysToString<T> = T extends string 
  ? T 
  : T extends number 
  ? `${T}` 
  : never;

type UseXQueryPattern<E extends string> = `use${Capitalize<E>}Query`

interface QueryHooks {
  [key: UseXQueryPattern<KeysToString<keyof Endpoints>>]: any
}

方案二：简化写法

直接利用模板字面量自动转换数字为字符串的特性，省略单独的类型工具：

interface Endpoints {
  [k: string]: any
}
type UseXQueryPattern<E extends string> = `use${Capitalize<E>}Query`
interface QueryHooks {
  [key: UseXQueryPattern<`${keyof Endpoints}`>]: any
}

两种方案都能将keyof Endpoints中的number类型转换为对应的字符串类型，满足UseXQueryPattern对泛型参数必须是string的约束，从而解决编译错误。

内容的提问来源于stack exchange，提问作者Islam Y-