DEV Community

Cover image for How to define and initialize private class fields in the constructor itself in TypeScript?
MELVIN GEORGE
MELVIN GEORGE

Posted on • Originally published at melvingeorge.me

How to define and initialize private class fields in the constructor itself in TypeScript?

Originally posted here!

To define and initialize private class fields in the constructor itself, you need to write the class field names with the private visibility modifier keyword in the constructor function's parameter brackets in TypeScript.

TL;DR

// a simple class
class Person {
  // define and assign the values to class
  // fields inside the class
  // constructor parameters brackets
  constructor(private name: string, private age: number) {
    // we do not need any code
    // in the constructor body 🔥
  }
}

// make an instance of the `Person` class
const john = new Person("John Doe", 23);

// log the contents
console.log(john); // {name: "John Doe", age: 23} ✅
Enter fullscreen mode Exit fullscreen mode

For example, let's say we have a class called Person where we need to define 2 fields called name and age.

A long way to define and then initialize class fields is by creating the fields inside the class body and then assigning the values from the constructor to the class fields using the this operator.

It may look like this,

// A very long process and more code 😩
// a simple class
class Person {
  private name: string;
  private age: number;

  // assing the values to class
  // fields using the class constructor
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}
Enter fullscreen mode Exit fullscreen mode

Now to make the process and code shorter TypeScript provides us a way where we can define and then initialize the class fields at the same time in the constructor parameters brackets.

We can write the class field names with the private visibility modifier keyword in the constructor function's parameter brackets like this,

// A very short process and less code 😃
// a simple class
class Person {
  // define and assign the values to class
  // fields inside the class
  // constructor parameters brackets
  constructor(private name: string, private age: number) {
    // we do not need any code
    // in the constructor body 🔥
  }
}
Enter fullscreen mode Exit fullscreen mode

As you can see that we have not used any code inside the constructor body.

Now let's make an instance of the Person class and pass the value of John Doe as the first argument and the value of 23 as the second argument to the constructor function and log the contents of the object to the console.

It can be done like this,

// A very short process and less code 😃
// a simple class
class Person {
  // define and assign the values to class
  // fields inside the class
  // constructor parameters brackets
  constructor(private name: string, private age: number) {
    // we do not need any code
    // in the constructor body 🔥
  }
}

// make an instance of the `Person` class
const john = new Person("John Doe", 23);

// log the contents
console.log(john); // {name: "John Doe", age: 23} ✅
Enter fullscreen mode Exit fullscreen mode

As you can see from the above code we have got the correct output with the values assigned to the appropriate keys in the object. This proves that the class fields have been defined and initialized.

We have successfully defined and initialized private class fields in the constructor itself in TypeScript. Yay 🥳!

See the above code live in codesandbox.

That's all 😃!

Feel free to share if you found this useful 😃.


Top comments (0)