如何将TypeScript泛型函数接口提取为可复用的独立类型/接口变量

错误原因 #

1. 你定义的MyType泛型要求传入2个类型参数，你调用时仅传入了1个，不符合定义要求
2. 你传入的x是运行时的变量值，不能直接作为类型使用，需要通过typeof x获取它的TS类型
3. 函数内部直接访问obj、key会报错，这两个属性是params的子属性，需要从params中读取

解决方案 #

方案1：给泛型设置默认值，减少传参

如果要实现仅传一个类型参数就能使用MyType，可以给第二个泛型参数设置默认值：

// 给Key设置默认值为Type的所有键的联合类型
type MyType<Type, Key extends keyof Type = keyof Type> = {obj: Type, key: Key}

let x = { a: 1, b: 2, c: 3, d: 4 };

// 此时仅传一个类型参数也不会报错
function getPropertyGeneric(params: MyType<typeof x>) {
  return params.obj[params.key];
}

方案2：把泛型提升到函数层面，实现通用复用

如果希望这个工具函数不绑定死x的类型，可以把泛型定义放在函数上，调用时TS会自动推导类型，无需手动传入：

type MyType<Type, Key extends keyof Type> = {obj: Type, key: Key}

// 泛型定义在函数上，调用时自动推导类型
function getPropertyGeneric<Type, Key extends keyof Type>(params: MyType<Type, Key>) {
  return params.obj[params.key];
}

// 调用示例
let x = { a: 1, b: 2, c: 3, d: 4 };
getPropertyGeneric({obj: x, key: "a"}); // 正常运行
getPropertyGeneric({obj: x, key: "m"}); // 会触发类型校验错误，和官方示例效果一致

内容的提问来源于stack exchange，提问作者Susitha Ravinda Senarath