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

Originally posted here!

To define and initialize protected class fields in the constructor itself, you need to write the class field names with the protected 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(protected name: string, protected 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} ✅

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 {
  protected name: string;
  protected age: number;

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

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 protected 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(protected name: string, protected age: number) {
    // we do not need any code
    // in the constructor body 🔥
  }
}

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(protected name: string, protected 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} ✅

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 protected 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 😃.

---