Typescript constructor shorthand when parameters are passed as an object

Question

I know we can make constructor short hand when we pass the parameters in a traditional way like

class Foo {
  
  private name: string;
  private age: number;

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

So the equivalent shorthand constructor notation for this class will be

class Foo {
      constructor(private name: string, private age: number) {}
    }

Similarly, how can I do the same shorthand when the constructor parameters are passed in as objects like below.

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

Alireza Ahmadi · Accepted Answer · 2022-11-19 20:05:36Z

15

You can do like this:

  class Foo {
      constructor(public obj : { name: string, age: number, group: string}) {
      }
   }
  let foo = new Foo({name: 'name',  age: 42, group: 'answers'});

  alert(foo.obj.name);

PlaygroundLink

edited Nov 19, 2022 at 20:05

answered Jul 4, 2021 at 6:34

Alireza Ahmadi

10.2k8 gold badges28 silver badges66 bronze badges

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

3 Comments

Mohamed Imran Over a year ago

I like this approach. Just out of curiosity, how I could access the members using this keyword inside the class. Is it possible with a similar approach? Something like this.name instead of this.obj.name

Alireza Ahmadi Over a year ago

Yes you can. just like : this.obj.age

Flavio Vilante Over a year ago

@AlirezaAhmadi if you have a lot of properties in obj you may use this shorthand to avoid type this everywhere: const { prop1, prop2, prop3, prop4 } = this.obj

MBer · Accepted Answer · 2021-07-04 06:15:19Z

0

I am not aware of a shorter way. If you ignore the constructors and just try to assign that object to three variables name, age, and group, then this is really a question about how to declare types while destructuring an object:

const { name, age, group } = {
  name: 'name',
  age: 42,
  group: 'answers',
};

TypeScript does not have a special notation for regular destructuring (lots of previous answers and blog posts end up using the same style as you did), so it does not have such a notation for destructuring inside a function definition.

You can keep the code a little cleaner by making the type definition an interface.

answered Jul 4, 2021 at 6:15

MBer

2,57424 silver badges34 bronze badges

Collectives™ on Stack Overflow

Typescript constructor shorthand when parameters are passed as an object

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related