TypeScript中如何正确定义泛型对象参数的类型别名

写法1：抽离参数对象类型 #

// 泛型参数声明在类型别名名称后
type FuncDetails<T extends keyof typeof settings> = {
  key: T,
  value: typeof settings[T]
}

// 函数声明时携带泛型关联到参数类型
function changeSetting2<T extends keyof typeof settings>(details: FuncDetails<T>): void {
  // 业务逻辑
}

写法2：抽离完整函数类型 #

如果你想把整个函数的类型都抽离复用，可以直接定义泛型函数类型：

type ChangeSettingFunc = <T extends keyof typeof settings>(details: {
  key: T, 
  value: typeof settings[T]
}) => void

// 直接赋值使用，不需要再单独写函数的泛型声明
const changeSetting2: ChangeSettingFunc = (details) => {
  // 业务逻辑
}

错误原因 #

你原先的写法属于语法错误：<T extends keyof typeof settings>放在=右侧是定义泛型函数类型的语法，不能直接跟对象类型声明。如果要定义带泛型参数的对象类型，必须把泛型参数声明在类型别名的名称后方。

两种写法都可以实现和changeSetting1完全一致的类型校验效果，调用时会自动推导key对应的value类型，类型不匹配时会正常抛出错误。

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