TypeScript区分联合类型调用setEntity报错的解决方法咨询

问题原因 #

你定义的IEntity是联合类型，当它与IProps交叉后，TypeScript会对setEntity的参数类型做逆变处理：联合类型的函数参数会被推断为各分支参数类型的交叉（IReport & ITest），因此传入IReport或ITest都会触发类型不兼容错误。

修复方案：用泛型绑定类型关联 #

最优雅的方式是使用泛型，让entity和setEntity的类型强绑定，从根源避免类型歧义：

// 定义泛型版IEntity，确保entity和setEntity的类型完全匹配
export type IEntity<T extends IReport | ITest> = {
  entity: T;
  setEntity: (value: T) => void;
};

// 组件Props也改为泛型类型
type IProps<T extends IReport | ITest> = {
  values: IValues;
  meta: IMeta;
} & IEntity<T>;

// 组件使用泛型约束
export const CreateField = <T extends IReport | ITest>(props: IProps<T>) => {
  // 此时调用setEntity时，参数类型会自动匹配T，完全符合类型要求
  props.setEntity(props.entity);
  // ... 组件其他逻辑
};

备选方案：类型守卫缩小范围 #

如果不想使用泛型组件，也可以在组件内部通过类型守卫明确当前entity的类型，再调用setEntity：

export const CreateField = (props : IProps) => {
  // 假设IReport有独有的字段（比如reportId），用它做类型守卫
  if ('reportId' in props.entity) {
    props.setEntity(props.entity); // 此时TypeScript会推断entity是IReport
  } else {
    props.setEntity(props.entity); // 此时TypeScript会推断entity是ITest
  }
};

注意：类型守卫需要依赖IReport和ITest独有的字段或特征，确保TypeScript能正确区分两个类型。

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