获取输入类型并将其强制转换为Angular

Question

我将@Input() element变量传递给app-child组件

<app-child [element]="element"></app-child>

element是一个对象。它可以是多种类型，例如Blue，Red或Green

在ChildComponent.ts内，如何确定element的类型并将其转换为正确的类型？ instanceof不能与any类型的变量一起使用。

`ChildComponent.ts`

@Input() element: any; // is it of type Blue, Red or Green?

Answer 1

首先，如果只允许使用红色，蓝色和绿色值，则可以更明确地声明元素：

@Input() element: Red | Blue | Green;

如何确定类型取决于红色，蓝色或绿色的类型。如果他们是班级，您可以使用可靠的instanceof运算符：

if (this.element instanceof Red) {
    const red: Red = this.element; // no cast necessary in if-block
}

如果它们是接口，那么这不起作用，因为typescript接口不能通过转换到JavaScript。你虽然can test a member：

if ((<Red> this.element).reddishMember) {
    const red = <Red> this.element;
}