To define and initialize public and readonly class fields in the constructor itself, you need to write the class field names with the public followed by the readonly visibility modifier keywords in the constructor function's parameter brackets in TypeScript.
TL;DR
// 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(public readonly name: string, public 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} ✅
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 {
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 public and readonly visibility modifier keywords 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(public readonly name: string, public 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(public readonly name: string, public 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,
// 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(public readonly name: string, public 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 public class fields in the constructor itself in TypeScript. Yay 🥳!
See the above code live in codesandbox.
That's all 😃!