Angular 5 数组类型转换答案

【问题标题】：Angular 5 array type castingAngular 5 数组类型转换
【发布时间】：2018-03-25 17:04:09
【问题描述】：

我遇到了以下不寻常的情况：

我有两个模型，为了讨论的目的，让它们分别是 Car 和 Spaceship。

我编写了一个组件，其输入由以下约束定义：此输入是一个数组，可以是 Car 或 Spaceship 类型，但不能同时是两者。因此，生成以下代码：

@Component({
    selector: 'app-stack-example',
    ...
})
export class StackExample{
    @Input() listOfVehicles: Array<Car> | Array<Spaceship> = [];

...
}

据我了解，这应该是有效代码，因为我从不希望它接收混合数组。在对输入设置进行一些开发后，我遇到了以下问题：

以任何方式（push()、splice()、indexOf()、find()、findIndex() 等）修改/访问数组时，例如：

this.listOfVehicles.push(new Car());

我收到以下错误：

TS2349: Cannot invoke an expression whose type lacks a call signature. Type '((...items: Car[]) => number) | ((...items: Spaceship[]) => number)' has no compatible call signatures.

为什么会这样？

【问题讨论】：

我不认为这是有效的。为了能够push 类型为Car 的实例，您需要listOfVehicles 为具体类型Array<Car>，而您定义的listOfVehicles 类型不能保证这一点。
@EduardMalakhov 这是有道理的。作为 H.B.建议，我想我只需要将其声明为 Array 并通过另一个输入将其初始化为 new Array 或。泰！
为了让你的代码更安全，你可以声明一个基类，例如Vehicle 然后让Car 和Spaceship 扩展它，并使listOfVehicles 类型为Array<Vehicle>。
啊，是的，我也一直在考虑，我可以让它们从父类继承，因为它们有共同的字段...
继续，从 OOP 的角度来看，这将是正确的方法。

标签： arrays angular typescript ecmascript-6

【解决方案1】：

编译器无法从代码中看出数组当前的类型。因此，在对数组使用函数之前，您可能必须检查类型或将数组强制转换为两种数组类型之一。

基本上，您的参数不能同时分配给push(item: Car) 和push(item: Spaceship) 两种可能的类型。

【讨论】：