TypeScript中如何将字符串映射为自定义类型用于泛型函数调用

报错原因 #

TypeScript 类型系统仅在编译阶段生效，所有类型标注的内容必须是编译期可确定的类型。你代码里的typeVariable是普通JS运行时值，不能直接放到泛型参数这种类型语法位里，所以触发2749错误。

解决方案 #

方案1：变量加const断言结合typeof取值 #

如果你确定typeVariable的值不会修改，只要给它加as const断言把它的类型收窄为字符串字面量，再用typeof取它的类型就可以作为索引使用，修改后代码如下：

interface CustomType {
  x: number,
  y: number
}

interface TypeMapper { 'CustomType': CustomType }

type Test = TypeMapper['CustomType'] // CustomType

function func<T>(x: number, y: number) {
  let v: T;
}
// as const 把变量类型收窄为字面量'CustomType'，而非宽泛的string类型
const typeVariable = 'CustomType' as const;
// 用typeof取变量的编译时类型，就可以作为TypeMapper的合法索引
const z = func<TypeMapper[typeof typeVariable]>(1,2);

方案2：直接使用字符串字面量索引 #

如果不需要复用这个字符串变量，直接写字面量在索引位即可，符合你最初期望的写法：

const z = func<TypeMapper['CustomType']>(1,2);

方案3：泛型和入参绑定，自动推导类型 #

如果希望运行时传字符串就能自动匹配对应类型，可以把函数的泛型和入参做关联，不需要手动写泛型尖括号：

// 泛型K约束为TypeMapper的合法键
function func<K extends keyof TypeMapper>(typeKey: K, x: number, y: number) {
  // 直接用TypeMapper[K]得到映射后的类型
  let v: TypeMapper[K];
}
// 传字符串参数时TS会自动推导泛型，不需要手动指定类型
const z = func('CustomType',1,2);

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