instantiate typescript class instance with values (object initialization)

Question

So in c# you can instantiate a class with values using the object initializer syntax. In TypeScript there doesn't appear to be the same kind of object initializer syntax. What I've found is that you can initialize values using the following two methods:

Constructor Initialization:

class MyClass {
  constructor(num: number, str: string) {
    this.numProperty = num;
    this.strProperty = str;
  }
  numProperty: number;
  strProperty: string;
}

let myClassInstance = new MyClass(100, 'hello');

Object Type Casting:

class MyClass {
  numProperty: number;
  strProperty: string;
}

let myClassInstance = <MyClass>{
  numProperty: 100,
  strProperty: 'hello'
};

While I like using Object Type Casting syntax in TypeScript, it only works with simple DTO classes that don't have methods you need to use. This is because casting doesn't actually create an object of the class type you are casting to.

Are there any other ways to do object initialization in TypeScript?

Be careful with the Object Type Casting option. The TS compiler will know that the object is of type MyClass but the JavaScript will not: myClassInstance instanceof MyClass will return false. — Dan Def
– Dan Def, Commented Mar 6, 2018 at 21:42

jcalz · Accepted Answer · 2018-03-06 17:06:29Z

10

If you like the "type casting" method but want to get an actual instance of the class, you can use Object.assign or a helper function like the following:

function init<T>(ctor: new () => T, props: Partial<T>): T {
  return Object.assign(new ctor(), props);
}

And you can use it like so:

class MyClass {
  public numProperty: number = 0;
  public strProperty: string = "";
  public worksWithMethodsToo() {
     console.log("numProperty: "+this.numProperty);
     console.log("strProperty: "+this.strProperty);
  }
}

let myClassInstance = init(MyClass, { numProperty: 100, strProperty: 'hello' });
myClassInstance.worksWithMethodsToo(); // works

There's also a version of the "constructor initialization" method that allows the constructor to be written more easily by using access modifiers like public or private on the parameters in the constructor signature to create what's called parameter properties:

class MyClass {
  // body of constructor is not necessary
  constructor(public numProperty: number, public strProperty: string) {}
}

let myClassInstance = new MyClass(100, 'hello');

That's more or less the same as your original MyClass (parameter names are different I guess), but it cuts down on the boilerplate code.

Does that help? Good luck.

edited Mar 6, 2018 at 17:06

answered Mar 6, 2018 at 16:31

jcalz

339k29 gold badges452 silver badges449 bronze badges

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

1 Comment

fonzane Over a year ago

I like this solution. It is better than creating an empty instance and then assigning all the values step by step.

Collectives™ on Stack Overflow

instantiate typescript class instance with values (object initialization)

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related