TypeScript联合类型结合类型守卫无法正确识别类型问题

首先先明确这类问题的核心：TypeScript无法通过type枚举判断来正确缩小联合类型的范围，导致访问分支专属属性时报错。以下是针对性的解决方案和排查点：

一、先确认类型定义的正确性 #

确保你的联合类型分支和枚举严格绑定，避免类型模糊。比如正确的类型定义应该是：

enum NodeDataChildType {
  TEXT = 'TEXT',
  CHOICES = 'CHOICES'
}

// 每个分支的type字段直接使用枚举成员，而非字符串字面量
type NodeDataChildText = {
  type: NodeDataChildType.TEXT;
  content: string;
};

type NodeDataChildChoice = {
  type: NodeDataChildType.CHOICES;
  choices: string[];
};

// 联合类型仅包含明确区分的分支
type NodeDataChildren = NodeDataChildText | NodeDataChildChoice;

如果你的类型定义中，某个分支的type是宽泛的string类型而非枚举成员，TypeScript就无法通过枚举值判断缩小类型范围。

二、解决方案 #

1. 自定义类型守卫函数（最可靠方案） #

如果自动类型守卫失效，手动定义类型守卫函数来明确判断分支类型：

// 自定义类型守卫，明确返回类型断言
function isChoiceChild(child: NodeDataChildren): child is NodeDataChildChoice {
  return child.type === NodeDataChildType.CHOICES;
}

在React组件中使用：

const MyComponent = ({ data }: { data: { children: NodeDataChildren } }) => {
  if (isChoiceChild(data.children)) {
    // 这里TypeScript会正确识别data.children为NodeDataChildChoice类型
    return <div>{data.children.choices.join(', ')}</div>;
  }
  return <div>{data.children.content}</div>;
};

2. 临时方案：类型断言 #

如果不想写守卫函数，可直接用类型断言明确指定分支类型：

if (data.children.type === NodeDataChildType.CHOICES) {
  const choiceChild = data.children as NodeDataChildChoice;
  return <div>{choiceChild.choices.join(', ')}</div>;
}

3. 检查props的类型推断 #

确保传递给组件的data参数没有被推断为宽泛类型（比如any或unknown）。显式指定类型：

// 错误示例：data会被推断为any，导致类型守卫失效
const rawData = { children: { type: NodeDataChildType.CHOICES, choices: ['A', 'B'] } };

// 正确示例：显式指定类型
const data: { children: NodeDataChildren } = {
  children: { type: NodeDataChildType.CHOICES, choices: ['A', 'B'] }
};

<MyComponent data={data} />

三、排查其他可能原因 #

• 检查联合类型的所有分支是否都包含type字段，缺失type的分支会导致类型守卫无法工作。
• 避免数字枚举的隐式类型问题：如果使用数字枚举，确保类型定义中的type字段严格对应枚举值，而非数字字面量。

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