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

I'm looking for a way to merge the functionalities of tsc build watch and nodemon into a single Node.js

What are the steps for publishing a Three.js project on github pages?

Exploring the implementation of constructors and classes in JavaScript

The blur() function does not function properly on IOS devices such as iPad and iPhone

Incorporate fresh data into dropdown options upon selection using Vue3

Which behaviors that are typically exhibited by browsers will be stopped by calling `event.preventDefault()`?

How to change a specific value in an array of objects using React

Tips for extracting title and image from someone else's blog posts to share on your own website

Validating a model in Mongoose: Best practices for updating data

Utilizing TypeScript in Kendo UI for JQuery

What is the best way to make IE 10 display a pointer instead of an I-bar for a select list?

Rendering HTML or links sourced from encoded JSON data with JavaScript

Vue error: Uncaught promise rejection - RangeError: The computed value update has exceeded the maximum call stack size

Obtaining a return value from a function that involves a series of chained Ajax requests in jQuery

Encountered an issue while executing the next build process

Is there a way to utilize the child component's method?

Using Vue.js and axios to manipulate injected HTML content

Tips for displaying the HTML content within the autocomplete box

"Using the selected option from a dropdown list to pass to a PHP file for autocomplete functionality

Bar chart in Highcharts vanishing following the update from version 10.2.1 to 10.3.1