TypeScript中关联枚举的数据模型如何正确比较__typename字段？

问题根因 #

你现在的写法永远返回false，核心是因为TypeScript默认定义的无赋值枚举是数字枚举：你定义的ActivtiyCardType中，ActivtiyCardType.Dance实际运行时值为数字0，ActivtiyCardType.ReferralTransaction值为数字1，而__typename的类型是数字，和字符串'Dance'做全等判断自然不成立。

两种适配方案 #

根据你数据源（后端/接口）返回的__typename实际值选择对应方案：

方案1：数据源返回字符串类型的枚举值（最常用场景） #

先把枚举修改为字符串枚举，明确指定每个枚举成员的运行时值和字符串一致：

enum ActivtiyCardType  {
    Dance = 'Dance',
    ReferralTransaction = 'ReferralTransaction',
}

比较时直接引用枚举成员，不要硬编码字符串，既避免拼写错误，也能享受TS类型校验：

{activity.__typename === ActivtiyCardType.Dance ? (
  // Dance类型卡片的渲染逻辑
) : (
  // 其他类型卡片的渲染逻辑
)}

方案2：数据源返回数字类型的枚举值 #

不需要修改枚举定义，直接引用枚举成员做判断即可：

{activity.__typename === ActivtiyCardType.Dance ? (
  // Dance类型卡片的渲染逻辑
) : null}

进阶优化：添加类型守卫自动收窄类型 #

如果后续不同枚举值对应的ActivityCardData有差异化字段，可以定义类型守卫函数，让TS自动识别对应类型的字段，避免类型报错：

// 定义Dance类型的类型守卫
function isDanceActivity(activity: ActivityCardData): activity is ActivityCardData & { __typename: typeof ActivtiyCardType.Dance } {
  return activity.__typename === ActivtiyCardType.Dance
}

业务代码中使用：

{data?.map((activity) => {
  if (isDanceActivity(activity)) {
    // 此处TS会自动识别activity为Dance类型，可直接调用该类型特有的字段
    return <div>{activity.danceSuccessful ? '舞蹈成功' : '舞蹈失败'}</div>
  }
  return <div>其他类型卡片</div>
})}

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