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

---
  title: How to define and initialize protected readonly class fields in the constructor itself in TypeScript?
  published: true
  tags: TypeScript
  date: Mon May 09 2022 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/define-and-initialize-protected-readonly-class-fields-in-constructor-itself-typescript
  cover_image: https://melvingeorge.me/_next/static/images/main-b224ff7d4f0e9a51c43333fafa7e1459.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/define-and-initialize-protected-readonly-class-fields-in-constructor-itself-typescript)
  
To define and initialize protected and readonly class fields in the constructor itself, you need to write the class field names with the `protected` followed by the `readonly` visibility modifier keywords in the constructor function's parameter brackets in TypeScript.

### TL;DR

```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 readonly 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);

// try to assign a value to the `readonly` name property
// ❌ Error. Cannot assign to 'name' because it is a read-only property.
// Also this is a protected property
john.name = "John Daniels";

// 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 {
  name: string;
  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` and `readonly` visibility modifier keywords 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 readonly 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 readonly 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.

Now to check if the `name` property is `readonly`, let's try to assign a value to the property using the `.` operator (dot operator) in `john` object 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 readonly 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);

// try to assign a value to the `readonly` name property
john.name = "John Daniels"; // ❌ Error. Cannot assign to 'name' because it is a read-only property.

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

As you can see from the above code that when we try to assign a value to the `readonly` property, the TypeScript compiler shows us an error saying `Cannot assign to 'name' because it is a read-only.` which is what we want to happen.

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-readonly-class-fields-in-constructor-itself-typescript-tzkooz?file=/src/index.ts).

That's all 😃!

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

---