Angular 5 array type casting

Question

I came across the following unusual scenario:

I have two models, for the purposes of this discussion, let them be Car and Spaceship.

I wrote a component with an input defined by the following constraint: This input is an array that can either be of type Car or Spaceship, but not both. Thus, producing the following code:

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

...
}

From my understanding this should be valid code, since I never want it to receive a mixed array. After doing some dev with the input set up as such, I ran into the following issue:

When modifying/accessing the array in any way (push(), splice(), indexOf(), find(), findIndex(), etc), eg:

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

I get the following error:

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

Why does this occur?

I don't think that is valid. In order to be able to push an instance of type Car you need listOfVehicles to be of concrete type Array<Car>, which is not guaranteed by the type of listOfVehicles as you define it. — Eduard Malakhov
– Eduard Malakhov, Commented Mar 25, 2018 at 17:10
@EduardMalakhov that makes sense. As H.B. suggested, I guess I'll just have to do something like declare it as Array<any> and initialize it as either new Array<Car> or <Spaceship> by means of another input. Ty! — jarodsmk
– jarodsmk, Commented Mar 25, 2018 at 17:13
To make your code more type-safe, you could declare a base class, e.g. Vehicle and then have both Car and Spaceship extend it, and make listOfVehicles of type Array<Vehicle>. — Eduard Malakhov
– Eduard Malakhov, Commented Mar 25, 2018 at 17:18
Ah yes, I've been contemplating that too, I could just have them inherit from a parent class since they have common fields... — jarodsmk
– jarodsmk, Commented Mar 25, 2018 at 17:25
GO ahead, from the OOP standpoint that would be the right way to go. — Eduard Malakhov
– Eduard Malakhov, Commented Mar 25, 2018 at 17:34

brunnerh · Accepted Answer · 2018-03-25 17:08:21Z

1

It is not apparent to the compiler from the code what type the array currently has. So before using functions on the array, you probably would have to check types or cast the array to one of the two array types.

Essentially, your argument is not assignable to both possible types push(item: Car) and push(item: Spaceship) at the same time.

answered Mar 25, 2018 at 17:08

brunnerh

188k30 gold badges362 silver badges434 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 5 array type casting

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related