如何限制TypeScript泛型函数的类型参数T仅为指定的两种类型？

核心实现方式是给泛型参数添加extends约束，将T的取值范围限定为boolean和{ b: string }的联合类型即可：

const fn = <T extends boolean | { b: string }>(props: T) => {
  // 此处可正常复用泛型T的逻辑
  // 可通过类型收窄区分两类入参做不同处理
  if (typeof props === 'boolean') {
    // TS自动推断当前props为boolean类型
    console.log(props ? '布尔真值' : '布尔假值')
  } else {
    // TS自动推断当前props为{ b: string }类型
    console.log('对象的b属性值：', props.b)
  }
}

效果验证 #

• 合法入参无报错：

  fn(true)
  fn(false)
  fn({ b: '测试字符串' })
  

• 非法入参触发类型校验错误：

  // 以下调用都会抛出TS类型错误
  fn(123)
  fn({ b: 456 })
  fn({ a: '额外属性' })
  

如果你在.tsx文件中编写该箭头函数，泛型语法会和JSX标签语法产生歧义，只要在泛型参数末尾加一个逗号即可解决：

const fn = <T extends boolean | { b: string },>(props: T) => {
  // 函数逻辑和之前完全一致
}

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