TypeScript中switch类型转换后仍报类型不匹配错误该如何解决？

• 判别式字段未设置为必填：可辨识联合类型要求作为类型判别依据的type字段必须是所有子类型的必填属性，你当前定义的sharedTypes中type是可选属性（带?标记），TS无法保证每个DetailsData类型的实例都存在type字段，因此无法通过switch(data.type)做自动类型收窄。
• 转换函数的返回类型定义过宽：你给detailsDataCaster声明的返回类型是DetailsData | null，即使函数内部做了类型强转，TS只会以你声明的返回类型为准，不会自动推导不同type入参对应的返回值具体类型，因此调用函数后拿到的data仍然是宽泛的联合类型，收窄逻辑失效。
• 未处理null边界情况：你调用转换函数后没有判断是否返回了null就直接访问data.type，存在运行时报错风险，这也是TS类型校验不通过的隐含原因之一。

1. 修正可辨识联合的判别式约束，把sharedTypes中的type改为必填：

export type sharedTypes = {
  name?: string;
  OEECategory?: string;
  OAECategory?: string;
  color?: string;
  type: detailsDataTypes; // 去掉可选标记?
};

2. 类型转换函数可以保留原有业务逻辑，不需要额外修改内部实现：

export const detailsDataCaster = (data: DetailsData): DetailsData | null => {
  switch (data.type) {
    case detailsDataTypes.ABSTRACT:
      return <AbstractData>data;
    case detailsDataTypes.MACHINE:
      return <MachineData>data;
    case detailsDataTypes.USER:
      return <UserData>data;
    default:
      console.log('Wrong data type. Go yell at backend team or check your mocks');
      return null;
  }
};

3. 组件内调用时先做非空判断，再走分支收窄即可：

export const Details: FC<IDetails> = ({ data: $data = mockUserData }): ReactElement => {
  const data = detailsDataCaster($data);
  // 先处理返回null的情况，同时让TS确定后续逻辑中data一定非空
  if (!data) return <div />;

  switch (data.type) {
    case detailsDataTypes.ABSTRACT:
      return <>Abstract</>;
    case detailsDataTypes.MACHINE:
      return <>Machine</>;
    case detailsDataTypes.USER:
      // 此时TS已经可以自动把data收窄为UserData类型，不会报错
      return <UserDisplay data={data} />;
    default:
      return <div />;
  }
};

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