To make a setter
method in a class in TypeScript, you can use the set
keyword followed by the method definition in the class.
A setter
method is used to set the value of a particular class field. Mostly if you have some processing to do before setting the value.
TL;DR
// a simple class
class Car {
_name: string;
yearMade: number;
constructor(name: string, yearMade: number) {
this._name = name;
this.yearMade = yearMade;
}
// setter method for the `name` class field
set name(name: string) {
this._name = name;
}
}
// create an instance of the `Car` class
const lexus = new Car("Lexus", 2022);
// cool part is that we can use
// `name` setter method like how we access a property
// note that we are not invoking the
// `name` even thought it's a "method" and
// just assigning a new value to the name property
// the new assigned value is then passed
// to the parameter in the setter method 👇🏽
lexus.name = "Lexus RX"; // ✅
// log the contents
console.log(lexus); // {_name: "Lexus RX", yearMade: 2022 } ✅
For example, let's say we have a class called Car
with 2 fields called name
having the type of string and yearMade
having the type of number
and a constructor to initialize the values of the fields in the class like this,
// a simple class
class Car {
name: string;
yearMade: number;
constructor(name: string, yearMade: number) {
this.name = name;
this.yearMade = yearMade;
}
}
Now let's make a setter method for the name
class field. To do that we can start by first creating a method with a parameter called name
that sets the value of the field name
using the this
operator and also prefixing the method with the keyword set
. Yes, that's all there is to do to make a setter
method.
It can be done like this,
// a simple class
class Car {
name: string;
yearMade: number;
constructor(name: string, yearMade: number) {
this.name = name;
this.yearMade = yearMade;
}
// setter method for the `name` class field
set setName(name: string) {
this.name = name;
}
}
Now let's create an instance of the Car
class and see how it works (hold on. there is a surprise 🙈),
// a simple class
class Car {
name: string;
yearMade: number;
constructor(name: string, yearMade: number) {
this.name = name;
this.yearMade = yearMade;
}
// setter method for the `name` class field
set setName(name: string) {
this.name = name;
}
}
// create an instance of the `Car` class
const lexus = new Car("Lexus", 2022);
// cool part is that we can use
// `setName` setter method like how we access a property
// note that we are not invoking the
// `setName` even thought it's a "method" and
// just assigning a new value to the setName property
// the new assigned value is then passed
// to the parameter in the setter method 👇🏽
lexus.setName = "Lexus RX"; // ✅
If you look closely at the above code you can see that we are using the setName
like how we access just a normal property in an object and not invoke it even though it's a method. Every setter method in a class is accessed like a property.
Some important points to note when creating setter
methods:
setter
methods should have only one parameter.setter
method doesn't return a value. The sole purpose of asetter
method is to set some values to the class fields.setter
methods can be accessed like a property in an object and any value that is assigned to thesetter
method is done using the=
operator (assignment operator) and this value is then passed to the setter method's parameter.
Yeah, this is the surprise I was talking about. Cool Right 🤩!
Now you may think that why do we even go for the hassle of making the setter
method for the name
field? We can simply access the name
field from the instance of the class.
But we cannot do that if it is a private
field. We will be discussing more on private
class fields in the upcoming blogs.
The main big reason is to have some logic run or some processing done before setting the value for the field itself.
Now for naming purposes let's rename the name
field to _name
and the setName
setter method to just the name
since we are accessing it as a property on the object, it's best to follow these conventions.
it can be done like this,
// a simple class
class Car {
_name: string;
yearMade: number;
constructor(name: string, yearMade: number) {
this._name = name;
this.yearMade = yearMade;
}
// setter method for the `name` class field
set name(name: string) {
this._name = name;
}
}
// create an instance of the `Car` class
const lexus = new Car("Lexus", 2022);
// cool part is that we can use
// `name` setter method like how we access a property
// note that we are not invoking the
// `name` even thought it's a "method" and
// just assigning a new value to the name property 👇🏽
// the new assigned value is then passed
// to the parameter in the setter method 👇🏽
lexus.name = "Lexus RX"; // ✅
// log the contents
console.log(lexus); // {_name: "Lexus RX", yearMade: 2022 } ✅
We have successfully created a setter
method for a class field in TypeScript. Yay 🥳!
See the above code live in codesandbox.
That's all 😃!