TypeScript如何为接收不同data参数的可复用函数配置正确泛型

你定义的泛型T没有设置任何类型约束，TS无法推断T类型上存在firstName或lastName属性，因此直接访问这两个属性时就会触发类型报错。

给泛型T添加联合类型约束，限定入参只能是TdataV1或TdataV2类型，再通过in操作符做类型收窄，TS就能正确识别对应分支下的属性类型，修正后代码如下：

type TdataV1 = {
  firstName: string
}

type TdataV2 = {
  lastName: string
}

const dataV1: TdataV1 = {
  firstName: 'Name',
}

const dataV2: TdataV2 = {
  lastName: 'Name',
}

// 给泛型添加联合类型约束
const getProperty = <T extends TdataV1 | TdataV2>(data: T): string => {
  // 用in操作符做类型收窄，TS会自动识别当前分支的data类型
  if ('firstName' in data) {
    return data.firstName
  }
  return data.lastName
}

// 调用时无需手动传入泛型，TS会自动做类型推断
getProperty(dataV1)
getProperty(dataV2)

如果后续有更多兼容的入参类型，直接在泛型约束的联合类型中追加即可。

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