Angular/TypeScript - 联合类型访问

Question

我有一个带有联合类型属性的接口：

interface Challenge {
  id: number;
  category: Category | string;
}

分类界面：

Interface Category {
  id: number;
  label: string;
}

在我的控制器中，我有一个 this.challenge 类型Challenge。

现在我想从模板中显示challenge.category.label：

<p>{{ challenge.category.label }}</p>

但它不起作用，因为字符串类型上不存在label 属性，如果我尝试从控制器访问该属性，则会出现相同的错误：

getLabel(): string {
  return this.challenge.category.label
}

如何指定这个类别实例的类型是Category，因为模板直接偏好

Answer 1

您可以使用Type Guards

最简单的解决方案是：

function getLabel(): string {
  return (<Category>this.challenge.category).label;
}

但如果你会多次使用它，那么值得创建一个类型保护：

function getLabel(): string {
  if (isCategory(challenge.category)) {
    return this.challenge.category.label;
  } else {
    // this will be string
    return this.challenge.category;
  }
}

function isCategory(category: Category | string): category is Category {
  return (<Category>this.challenge.category).label !== undefined;
}