TypeScript判别式联合类型中属性类型推断不匹配问题的原因及解决方法

我完全懂你的困惑，这种情况在TypeScript里确实挺常见的，咱们一步步拆解问题和解决办法～

为什么会报错？ #

TypeScript的类型检查在处理联合类型时，对独立属性的联合和关联属性的联合逻辑不一样。你定义的TypeAB是TypeA和TypeB的联合，虽然每个子类型里的type、formData、onSubmit是强关联的，但当你直接访问props.formData和props.onSubmit时，TS会把它们当成两个独立的联合类型：

• formData被推断为number | Date
• onSubmit被推断为((data: number) => void) | ((data: Date) => void)

这时候TS没法确定你调用onSubmit时传入的formData刚好对应它的参数类型——哪怕我们从逻辑上知道肯定匹配，但TS的类型系统没法自动推导这种“跨属性的关联关系”，所以就抛出了错误。

解决办法 #

1. 保持类型守卫（你已经尝试的方法）

这是最直接的方式，通过检查props.type来窄化类型，让TS明确当前props是TypeA还是TypeB：

const handleSubmit = () => {
  if(props.type === 'a') props.onSubmit(props.formData);
  if(props.type === 'b') props.onSubmit(props.formData);
};

虽然有点繁琐，但胜在直观且类型安全。

2. 用泛型强制关联属性（推荐）

我们可以定义一个类型映射，然后用泛型把type、formData、onSubmit三者强绑定起来，让TS能明确它们的关联关系：

// 先定义type和对应数据类型的映射
type TypeMap = {
  a: number;
  b: Date;
};

// 用泛型创建关联的联合类型
type TypeAB<T extends keyof TypeMap = keyof TypeMap> = {
  type: T;
  formData: TypeMap[T];
  onSubmit: (data: TypeMap[T]) => void;
};

export const MyForm = <T extends keyof TypeMap>(props: TypeAB<T>) => {
  const handleSubmit = () => {
    props.onSubmit(props.formData); // 这里不会再报错了！
  };
  return "return does no matter";
};

这种方式既保持了类型安全，又不用每次都写类型判断，代码更简洁。

3. 类型断言（谨慎使用）

如果你确定逻辑绝对没问题，可以用类型断言手动告诉TS类型是匹配的，但这种方式相当于绕过了TS的类型检查，写错逻辑的话会有风险：

const handleSubmit = () => {
  (props.onSubmit as (data: typeof props.formData) => void)(props.formData);
};

备注：内容来源于stack exchange，提问作者Rumpelstinsk