How to make a setter method in a class in TypeScript?
Tags: typescript
Published: 2022-04-23 00:00:00

---
  title: How to make a setter method in a class in TypeScript?
  published: true
  tags: TypeScript
  date: Sat Apr 23 2022 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/make-setter-method-class-typescript
  cover_image: https://melvingeorge.me/_next/static/images/main-b0d56e562927cb6a322976715094cc72.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/make-setter-method-class-typescript)
  
To make a `setter` method in a [class](https://melvingeorge.me/blog/create-class-typescript) in TypeScript, you can use the `set` keyword followed by the [method definition](https://melvingeorge.me/blog/create-methods-class-typescript) 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

```ts
// 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](https://melvingeorge.me/blog/create-field-class-typescript) called `name` having the type of string and `yearMade` having the type of `number` and a [constructor](https://melvingeorge.me/blog/create-class-constructor-typescript) to initialize the values of the fields in the class like this,

```ts
// 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,

```ts
// 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 🙈),

```ts
// 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,

```ts
// 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](https://codesandbox.io/s/make-setter-method-class-typescript-wjoojp?file=/src/index.ts).

That's all 😃!

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

---