TypeScript类型别名中Override函数签名如何解决类型不兼容报错

报错原因 #

你定义的B是A和另一个对象类型的交叉类型，对于同名属性onChange，交叉后要求它必须同时满足(e: Event) => void和(props: Props) => void两个函数类型的约束，也就是说这个函数必须既可以接收Event类型的入参，也可以接收Props类型的入参。你给出的实现只支持接收Props类型入参，传入Event时会找不到value属性，不符合类型约束，因此报错。

解决方案 #

方案1：如果你需要B的onChange同时兼容两种入参场景 #

直接把函数参数定义为两种类型的联合，再通过类型收窄处理不同逻辑即可：

const b: B = {
  onChange: (input: Event | Props) => {
    if ('value' in input) {
      // 处理Props类型入参
      console.log(input.value)
      return
    }
    // 处理Event类型入参
  }
}

方案2：如果你需要完全覆盖A的onChange定义，不需要兼容原Event入参 #

用通用的属性重写工具类型替代手动写Omit，避免硬编码属性名带来的重构风险：

// 通用重写工具类型：用U中的属性覆盖T中同名属性
type Override<T, U> = Omit<T, keyof U> & U;

// 重写A中的onChange属性
type B = Override<A, {
  onChange: (props: Props) => void
}>

// 赋值不会再报错
const b: B = {
  onChange: (props: Props) => console.log(props.value)
}

这个方案的好处是不需要手动指定要排除的属性名，后续如果A修改了onChange的属性名，只要同步修改B中对应要重写的属性名即可，工具会自动处理Omit逻辑，重构安全性更高。

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