React动态组件onChange联合类型的最佳类型校验方案是什么？

问题根源 #

你遇到的类型报错是因为当前的Props定义没有将type字段和onChange的类型做绑定，TypeScript无法仅通过props.type === 'date-picker'的判断，自动缩小onChange的联合类型范围。

最优解决方案：重构为可辨识联合类型 #

这是完全无断言、编译期就能完成校验的安全方案：

// 用type作为可辨识字段，将type和对应onChange类型绑定
type Props = 
  | {
      type: 'date-picker';
      onChange: (date: Date, event: React.SyntheticEvent<any, Event> | undefined) => void;
      // 其余公共属性或date-picker专属属性可在此定义
    }
  | {
      type: 'input';
      onChange: (e: React.ChangeEvent<any>) => void;
      // 其余公共属性或input专属属性可在此定义
    }

const DynamicField = (props: Props) => {
  if (props.type === 'date-picker') {
    // 此分支下TS会自动推导props.onChange符合DatePicker的类型要求，不会报错
    return (
      <DatePicker
        onChange={props.onChange}
        // 其余属性
      />
    )
  }
  // input分支同理，onChange会自动匹配input的事件类型
  return <input onChange={props.onChange} />
}

现有断言方案的安全性说明 #

如果暂时不想改动现有Props结构，你当前使用的类型断言在业务场景下是安全的：只要上层调用DynamicField时，传入type="date-picker"的同时配套传入符合要求的onChange函数，运行时就不会出现问题。但这种方案依赖开发者自行保证参数匹配，编译期无法拦截传错的情况，安全性弱于可辨识联合方案。

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