How to concat two different array types that extend/inherit the same type?

Question

I have two classes that inherit from the same superclass:

class Vehicle {}

class Bus extends Vehicle {}

class Truck extends Vehicle {}

Let's have two typed arrays:

var buses : Bus[];
var trucks : Truck[];

and a function that accepts an array of the superclass type.

function checkOil(vehicles : Vehicle[]) {}

I can pass in array of busses or array of trucks but I can not merge them and pass them together:

function checkOil(buses.concat(trucks));


//error TS2082: Supplied parameters do not match any signature of call target:
    Types of property 'pop' of types 'Bus[]' and 'Track[]' are incompatible:

How do I merge those arrays?

EDIT: TypeScript Playground

You could copy them both into a sufficiently large array of Vehicles. Why do you want to do that? — dfeuer
– dfeuer, Commented Jul 25, 2014 at 15:46
Concat to array of Vehicle won't work. Copy via for loop will but that is suboptimal, that's why I seek for better solution here. — daniel.sedlacek
– daniel.sedlacek, Commented Jul 25, 2014 at 16:00

Radim Köhler · Accepted Answer · 2014-07-25 16:30:42Z

14

The casting to <Vehicle[]> should work

function checkOil(vehicles : Vehicle[]) {}

checkOil((<Vehicle[]>buses).concat(trucks));

Typescript will cast the (busses) to Vehicle[], and the same will be done with the rest

e.g. this will return (in console) two objects - Vehicles

class Vehicle
{
    public Type: string;
}
class Bus extends Vehicle
{
    public A: string;
}
class Truck extends Vehicle
{
    public B: number
}

var buses: Bus[] = [];
buses.push({Type: 'Bus', A : 'A1'});
var trucks: Truck[] = [];
trucks.push({ Type: 'Truck', B: 1 });

function checkOil(vehicles: Vehicle[]) : Vehicle[]
{
    return vehicles;
}
var result = checkOil((<Vehicle[]>buses).concat(trucks));
console.log(result)

edited Jul 25, 2014 at 16:30

answered Jul 25, 2014 at 15:59

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

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

6 Comments

Radim Köhler Over a year ago

Well, the above code snippet is working... am I missing some part of your question?

Ryan Cavanaugh Over a year ago

If you use actually empty classes, you'll basically never get errors. Using empty types to experiment with a structural type system is a recipe for bad results.

daniel.sedlacek Over a year ago

it works as long as they have equal signatures (no methods == equal signatures). Try to add 'class Bus extends Vehicle { foo() {} }' and you will get "Type '{}' is missing property 'foo' from type 'Bus'."

Radim Köhler Over a year ago

Sorry guys, I did it in a hurry, ... now the example is working properly... but the concept of casting (assert in Typescript) is the way...

Radim Köhler Over a year ago

Please, take my updated snippet WILL Work ;) sorry for the fast... but not so accurate answer ;) now it works

|

Ryan Cavanaugh · Accepted Answer · 2014-07-25 16:58:03Z

4

Just type assert the first array to a common type of the two array types:

checkOil((<Vehicle[]>buses).concat(trucks));

edited Jul 25, 2014 at 16:58

answered Jul 25, 2014 at 16:15

Ryan Cavanaugh

223k59 gold badges280 silver badges235 bronze badges

5 Comments

Radim Köhler Over a year ago

Thanks for your comment, you are right. The Assert is the way

daniel.sedlacek Over a year ago

Sorry guys but that works only as far as the classes signatures are empty. Add a method and you get the same error: typescriptlang.org/Playground

daniel.sedlacek Over a year ago

Those parentheses made the difference :). Thanks

daniel.sedlacek Over a year ago

if you edit your answer I can give you the upvote you deserve :)

Ryan Cavanaugh Over a year ago

The answer has the correct parentheses. The link you posted does not. I'm not sure what you want me to edit.

Collectives™ on Stack Overflow

How to concat two different array types that extend/inherit the same type?

2 Answers 2

6 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related