Function in Typescript that accepts either a single object or an array of objects

Question

Function in Typescript that accepts either a single object or an array of objects

We frequently use a simple function declaration where the function can accept either a single object or an array of objects of a certain type.

The basic declaration looks like this:

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);
    }    
}

However, TypeScript throws an "type is not assignable" error in this scenario.

Is there a more efficient way to accomplish this? While we could create two separate functions, I believe handling both single and multiple objects this way is sufficient.

javascript typescript

Answer 1

Answer №1

There is a simpler solution available

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

Source: Mozilla Developer Network

The concat() function creates a new array by combining the original array with additional array(s) or value(s) passed as arguments.

Answer 2

There is a simpler solution available

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

Source: Mozilla Developer Network

The concat() function creates a new array by combining the original array with additional array(s) or value(s) passed as arguments.

Answer 3

Answer №2

An alternative approach is to utilize the rest parameter:

interface ISomeInterface {
    name: string;
}

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

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

You can invoke it as follows:

addNames(name1); // passing one name
addNames(name1, name2, name3); // passing multiple names separated by commas
addNames(...[name1, name2, name3]); // passing an array of names

Note that I have omitted the function keyword to prevent any potential scope loss of the this keyword inside the function body.

Answer 4

An alternative approach is to utilize the rest parameter:

interface ISomeInterface {
    name: string;
}

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

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

You can invoke it as follows:

addNames(name1); // passing one name
addNames(name1, name2, name3); // passing multiple names separated by commas
addNames(...[name1, name2, name3]); // passing an array of names

Note that I have omitted the function keyword to prevent any potential scope loss of the this keyword inside the function body.

Answer 5

Answer №3

Here is the solution you are looking for

interface ISomeInterface {
    title: string;
}

class SomeClass {
    public titles: ISomeInterface[];

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

Remember to use instanceOf instead of isArray.

Answer 6

Here is the solution you are looking for

interface ISomeInterface {
    title: string;
}

class SomeClass {
    public titles: ISomeInterface[];

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

Remember to use instanceOf instead of isArray.

Answer 7

Answer №4

To successfully handle this scenario in typescript, one can utilize multiple function signatures as demonstrated below:

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

For further insights on this topic, refer to the official handbook here

Answer 8

To successfully handle this scenario in typescript, one can utilize multiple function signatures as demonstrated below:

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

For further insights on this topic, refer to the official handbook here

Function in Typescript that accepts either a single object or an array of objects

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Having trouble deciphering the JSON data structure in JavaScript

Executing a Callback in Node with Redis Publish/Subscribe

How can I create a React component that is accessible and controllable from external sources?

Swapping out the default JavaScript random number generator for my custom JSON-based solution

Calculate the total sum of selected values in a multiple select dropdown using jQuery

Convert this JavaScript function into a jQuery function

Angular is throwing error TS2322 stating that the type 'string' cannot be assigned to the type '"canvas" while working with ng-particles

Vue.js is failing to re-render the component even after a change is made to

Error rendering {message} object on the Chrome Console

What steps should I take to incorporate a timer into my bot similar to the timer used by other giveaway bots

Customize Material UI (MUI) Autocomplete with preset initial selections

I encountered an Angular error that is preventing me from updating and uploading images to my Firebase Storage because it is unable to locate the storage bucket

I'm curious if it's possible to modify a webpage loaded by HtmlUnit prior to the execution of any javascript code

How to achieve multiplication in Javascript without utilizing the * operand

Experience the click action that comes equipped with two unique functions: the ability to effortlessly add or remove a class

I attempted to unsubscribe from an observable in Angular, but I encountered an error stating that the unsubscribe function does not exist

Looking up a destination with the Google Places API

Is it necessary to bump the major version if I make updates to a react module that does not affect existing code functionality, but may cause Jest snapshot tests to break?

Presentation: Troubleshooting Ineffective CSS3 Transitions

My PHP script is not functioning correctly with Ajax