TypeScript中如何让入参为对象属性名的函数返回对应属性类型

解决方案 #

核心是通过泛型捕获传入propertyName的具体字面量类型，关联返回值和入参key的类型关系：

修改后完整代码 #

type SomeType = {
  num: number,
  str: string
}

type NullableSomeType = {
  [key in keyof SomeType]: SomeType[key] | null
}

// 新增泛型K绑定入参propertyName的具体类型
const getValue = <K extends keyof SomeType>(
  propertyName: K, 
  objectA: NullableSomeType, 
  objectB: SomeType
): SomeType[K] => {
  // 此处建议将||替换为??，避免0、空字符串等合法非null值被误覆盖
  // 若业务逻辑需要覆盖所有falsy值可保留||
  return (objectA[propertyName] ?? objectB[propertyName]) as SomeType[K]
}

效果验证 #

调用时TS会自动根据传入的key推断对应返回值类型：

const testA: NullableSomeType = { num: null, str: '' }
const testB: SomeType = { num: 1024, str: 'default' }

// 自动推断为number类型
const num = getValue('num', testA, testB)
// 自动推断为string类型
const str = getValue('str', testA, testB)

原理解释 #

• 泛型K extends keyof SomeType会在函数调用时捕获传入的具体key字面量类型，而不是推导为宽泛的keyof SomeType联合类型
• 返回值声明为SomeType[K]，即可关联返回值类型与对应key的类型，实现你需要的“由传入propertyName确定返回值类型”的效果

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