Typescript function taking one or array of objects

Question

We are using simple function declaration quite a lot where function takes either single object or array of objects of some type.

Simple declaration is:

interface ISomeInterface {
    name: string;
}

class SomeClass {
    public names: ISomeInterface[] = [];

    public addNames(names: ISomeInterface | ISomeInterface[]): void {
        names = (!Array.isArray(names)) ? [names] : names;
        this.names = this.names.concat(names);
    }    
}

But TypeScript throws "type is not assignable" error.

Is there better way of doing this? Obviously we could have two separate functions, but I think handling single vs multiple this way is quite fine.

Protip: instead of isArray, use names = [].concat(names). 43% faster on chrome. — Amin Mohamed Ajani
– Amin Mohamed Ajani, Commented Sep 29, 2016 at 10:07

isvforall · Accepted Answer · 2016-03-02 14:44:22Z

35

You can make it easier

 addNames(names: ISomeInterface | ISomeInterface[]): void {
        this.names = this.names.concat(names);
 }

From MDN

The concat() method returns a new array comprised of the array on which it is called joined with the array(s) and/or value(s) provided as arguments.

answered Mar 2, 2016 at 14:44

isvforall

8,9166 gold badges39 silver badges52 bronze badges

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

7 Comments

Tomas Over a year ago

Great example of how I am over-engineering something instead of properly reading specs... thanks! I will keep the other answer as accepted though since it has a bit of extra info about TS that people seem not to know and it gives you more flexibility as to how pass the parameters

Tomas Over a year ago

Actually, this still compiles into error:

Error:(26, 46) TS2345: Argument of type 'ISomeInterface | ISomeInterface[]' is not assignable to parameter of type 'ISomeInterface'.  Type 'ISomeInterface[]' is not assignable to type 'ISomeInterface'.

isvforall Over a year ago

@Tom I've updated tsc to Version 1.9.0-dev.20160302 now it's working for me

Tomas Over a year ago

Cool, I have still 1.8.7 but im gona believe you :) actually im gonna accept your answer I think its better considering the ... that i mentioned in the other answer

Amin Mohamed Ajani Over a year ago

I had the same question and I later found out a different syntax of doing this addNames(names: ISomeInterface | Array<ISomeInterface>) just saying that this too works..

|

Silvermind · Accepted Answer · 2016-03-02 14:46:21Z

23

You could also use the rest parameter:

interface ISomeInterface {
    name: string;
}

class SomeClass {
    public names: ISomeInterface[] = []; // create an instance if applicable.

    addNames(...names: ISomeInterface[]): void {
        // the names argument will always be an array
        this.names = this.names.concat(names);
    }
}

You can call it like:

addNames(name1); // just pass one
addNames(name1, name2, name3); // pass more comma separated
addNames(...[name1, name2, name3]); // pass an array.

Please note that I removed the function keyword, because otherwise the this keyword inside the body block might lose scope depending on who's calling it.

edited Mar 2, 2016 at 14:46

answered Mar 2, 2016 at 14:33

Silvermind

5,9943 gold badges27 silver badges47 bronze badges

9 Comments

Tomas Over a year ago

Yes, beautiful, I did know about rest param but what I didn't know is that it compiles itself into params being always an array. thank you!

Marie Over a year ago

I didn't know rest parameters compiled down either. That is a neat solution!

Silvermind Over a year ago

@Tom I would also suggest instantiating the array as it would prevent you from doing null checks everywhere. public names: ISomeInterface[] = [];

Aaron Beall Over a year ago

Upvoted, this is the best solution IMO to pass "one or a list" of something to a function. Using a union type makes things unnecessarily cumbersome IMO.

Silvermind Over a year ago

@user2010955 You could do something like addNames(name: ISomeInterface, ...names: ISomeInterface[])

|

Martin · Accepted Answer · 2016-03-02 14:36:56Z

5

I think this is what you want

interface ISomeInterface {
    name: string;
}

class SomeClass {
    public names: ISomeInterface[];

    addNames(names: ISomeInterface | ISomeInterface[]): void {
        names = (names instanceof Array) ? names : [names];
        this.names = this.names.concat(<ISomeInterface[]>names)
    }    
}

You want to use instanceOf, not isArray.

answered Mar 2, 2016 at 14:36

Martin

16.4k4 gold badges51 silver badges58 bronze badges

1 Comment

Tomas Over a year ago

Sorry, not what I was asking for and your code still gives the same error

Marie · Accepted Answer · 2016-03-02 14:34:52Z

2

The official way typescript handles this is with multiple function signatures, for example:

addNames(names: ISomeInterface): void;
addNames(names: ISomeInterface[]): void;
addNames(names: any): void {
    ...
}

You can see more information in the official handbook here

edited Mar 2, 2016 at 14:34

answered Mar 2, 2016 at 14:27

Marie

2,2371 gold badge18 silver badges32 bronze badges

2 Comments

Tomas Over a year ago

Yes thats what I thought, but then if you call addNames("Hello World") it doesn't throw any error, so basically you could just use :any declaration and it would be the same...

Marie Over a year ago

I think you just have to validate it yourself at that point. I am not sure how it would work but you could try replacing names: any with name?: ISomeInterface, names?: ISomeInterface[]. That should prevent passing a string but it would allow you to pass nothing or both also. Then inside the function use names || [name] and it would be pretty seamless.

Collectives™ on Stack Overflow

Typescript function taking one or array of objects

4 Answers 4

7 Comments

9 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

9 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related