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

最简单的解决方案是：

sqrt(x)

但是，如果您将多次使用它，则值得创建类型保护：

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