How to define and initialize protected class fields in the constructor itself in TypeScript?
Tags: typescript
Published: 2022-05-06 00:00:00

---
  title: How to define and initialize protected class fields in the constructor itself in TypeScript?
  published: true
  tags: TypeScript
  date: Fri May 06 2022 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/define-and-initialize-protected-class-fields-in-constructor-itself-typescript
  cover_image: https://melvingeorge.me/_next/static/images/main-40c6dd2f3627d05e90c9927cb585e6c9.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/define-and-initialize-protected-class-fields-in-constructor-itself-typescript)
  
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

```ts
// 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,

```ts
// 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,

```ts
// 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,

```ts
// 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](https://codesandbox.io/s/define-and-initialize-protected-class-fields-in-constructor-itself-typescript-5imk3m?file=/src/index.ts).

That's all 😃!

### Feel free to share if you found this useful 😃.

---