To create a class constructor in TypeScript, you can use the keyword constructor inside the class body followed by the () symbol (parameters closing and opening brackets) and then write the {} symbol.
TL;DR
// a simple class
class Person {
name: string;
age: number;
// constructor for this class and
// using parameter names that are
// similar to the class field names
// and then assigning it to the class fields
// using the `this` keyword
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
}
// create an instance of the `Person` class
// and pass the values for the `name` and `age` fields
// through the brackets
const john = new Person("John Doe", 23);
// log the contents inside the `john` object
console.log(john); // {name: 'John Doe', age: 23} ✅
For example, let's create a class called Person with some fields like name having the string type and age having the number type.
It can be done like this,
// a simple class
class Person {
name: string;
age: number;
}
Now that we have created a class, we need to give values to the name and age fields in the class when we create an instance of the Person class. To do that we need a constructor and we can pass the values needed for the fields through the constructor when we create an instance of the Person class using the new keyword.
The constructor will look like this,
// a simple class
class Person {
name: string;
age: number;
// constructor for this class
constructor() {
// cool code goes here
}
}
As you can see from the above code we have created the constructor for the Person class, but how do we set the values to the fields in the class?
We can do that by utilizing the constructor parameters brackets. We can write the names of the parameters in the parameters brackets with the type it needs to have. This is similar to the usage of the function parameters. After writing the parameters in the parameters brackets, then we will assign the values of the parameters to the class fields by accessing them through the this keyword.
It can be done like this,
// a simple class
class Person {
name: string;
age: number;
// constructor for this class
// using parameter names that are
// similar to the class field names
// and then assigning it to the class fields
// using the `this` keyword
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
}
The this in the above code is a pointer to the instance of the class that we have created and this.name and this.age refer to the instance object fields.
Finally, let's create an instance of the Person class using the new keyword and pass the values of John Doe for the name parameter and 23 for the age parameter through the brackets.
It can be done like this,
// a simple class
class Person {
name: string;
age: number;
// constructor for this class
// using parameter names that are
// similar to the class field names
// and then assigning it to the class fields
// using the `this` keyword
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
}
// create an instance of the `Person` class
// and pass the values for the `name` and `age` fields
// through the brackets
const john = new Person("John Doe", 23);
Now if we log the contents of the john object we can see this as the output,
// a simple class
class Person {
name: string;
age: number;
// constructor for this class and
// using parameter names that are
// similar to the class field names
// and then assigning it to the class fields
// using the `this` keyword
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
}
// create an instance of the `Person` class
// and pass the values for the `name` and `age` fields
// through the brackets
const john = new Person("John Doe", 23);
// log the contents inside the `john` object
console.log(john); // {name: 'John Doe', age: 23} ✅
The log from the above clearly states we have successfully created an instance of the class Person with the values we supplied. Yay 🥳!
See the above code live in codesandbox.
That's all 😃!
Top comments (0)