How to make a setter method in a class in TypeScript?

Originally posted here!

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 a setter 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 the setter 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 😃!

Feel free to share if you found this useful 😃.

---