Do you have to use "new MyClass" when initializing an array in Typescript?

Question

Do you have to use "new MyClass" when initializing an array in Typescript?

In this example, I am creating a class called Person. I have opted to use a class instead of a type alias because the constructor for this class is more complex and contains functions.

class Person {
    name: string;
    age: number;
    constructor(name: string, age: number) {
        this.name= name;
        this.age= age;
  }
}

To initialize an array of instances of this class, I use the following code :

persons: Array<Person> = [
        new Person("Joe",30),
        new Person("Jack",40)
]

I'm curious if there is a way to avoid repeating the new Person multiple times. Any suggestions would be greatly appreciated. Thank you!

typescript

Answer 1

Answer №1

In case this is a common scenario, you have the option to develop a helper function that allows you to specify a class and its constructor parameters:

class User {
    username: string;
    id: number;
    constructor(username: string, id: number) {
        this.username = username;
        this.id = id;
    }
}


function createMany<T, P extends any[]>(cls: new (...p: P) => T, ...p: Array<P>): Array<T> {
    return p.map(a => new cls(...a))
}

var users: Array<User> = createMany(User,
    ["Alice", 101],
    ["Bob", 202]
);

Playground Link

If your class mainly consists of data fields, it's advisable to use an interface as per TypeScript conventions:


interface User {
    username: string;
    id: number;
}

var users: Array<User> = [
    { username: "Alice", id: 101 },
    { username: "Bob", id: 202 },
];

Playground Link

Answer 2

In case this is a common scenario, you have the option to develop a helper function that allows you to specify a class and its constructor parameters:

class User {
    username: string;
    id: number;
    constructor(username: string, id: number) {
        this.username = username;
        this.id = id;
    }
}


function createMany<T, P extends any[]>(cls: new (...p: P) => T, ...p: Array<P>): Array<T> {
    return p.map(a => new cls(...a))
}

var users: Array<User> = createMany(User,
    ["Alice", 101],
    ["Bob", 202]
);

Playground Link

If your class mainly consists of data fields, it's advisable to use an interface as per TypeScript conventions:


interface User {
    username: string;
    id: number;
}

var users: Array<User> = [
    { username: "Alice", id: 101 },
    { username: "Bob", id: 202 },
];

Playground Link

Answer 3

Answer №2

Your objective may not be entirely clear, but if you are manually entering the values (such as Joe, Jack, etc), consider storing them in an array and utilizing Array.map() to associate them with instances of Person, like so:

const personList = [
    {name: 'Joe', age: 30},
    {name: 'Jack', age: 40}
]

persons: Array<Person> = personList.map((person) => new Person(person.name, person.age))

I hope this suggestion proves helpful.

To streamline the class definition, you can include access modifiers within the constructor:

class Person {
    constructor(public name: string, public age: number) {}
    //                  ^^^ this.name       ^^^ this.age
}

Answer 4

Your objective may not be entirely clear, but if you are manually entering the values (such as Joe, Jack, etc), consider storing them in an array and utilizing Array.map() to associate them with instances of Person, like so:

const personList = [
    {name: 'Joe', age: 30},
    {name: 'Jack', age: 40}
]

persons: Array<Person> = personList.map((person) => new Person(person.name, person.age))

I hope this suggestion proves helpful.

To streamline the class definition, you can include access modifiers within the constructor:

class Person {
    constructor(public name: string, public age: number) {}
    //                  ^^^ this.name       ^^^ this.age
}

Do you have to use "new MyClass" when initializing an array in Typescript?

Answer №1

Answer №2

Similar questions

Sign up for the identical Observable within a Child Component in Angular 2 using TypeScript

The subsequent menu selection will be based on the chosen menu value

What is the best way to retrieve the Base64 string from a FileReader in NextJs using typescript?

Angular Bootstrap causes misalignment of table column headings based on different properties in object

Display the highlighted text within the input field

What causes an error when the App is enclosed within a Provider component?

Is there a way for me to determine if there are elements in one object array that exist in another object

Tips for adjusting the dimensions of a map within the app.component.html

Exploring the relationship between two entities in Angular 7 using Typescript

Allow Visual Studio Code to create a constructor for Typescript class

Expo constants failing to load on web due to unresolved manifest object issue

How can TypeScript be used to access a state object conditionally using an array?

Does the Typescript interface align with the specifications of this object?

Guide on validating multiple preselected checkboxes using Angular 8 reactive forms

Can you explain the use of parentheses in a typescript type when defining a key?

VPS mysteriously terminates TypeScript compilation process without any apparent error

The Vue and Typescript webpage is not appearing in the GAS sidemenu template

Utilizing Angular 11's HostListener to capture click events and retrieve the value of an object

Is there a built-in feature in npm or yarn that automatically installs @types when they are present in Typescript projects?

Is there a way for me to retrieve the username of an object from a select list?