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

Originally posted here!

To make a getter method in a class in TypeScript, you can use the get keyword followed by the method definition in the class.

A getter method is used to access the value of a particular class field. Mostly if you have some processing to do before returning the value.

TL;DR

// a simple class
class Car {
  _name: string;
  yearMade: number;

  constructor(name: string, yearMade: number) {
    this._name = name;
    this.yearMade = yearMade;
  }

  // getter method for the `_name` class field
  get name() {
    return this._name;
  }
}

// create an instance of the `Car` class
const lexus = new Car("Lexus", 2022);

// cool part is that we can use
// `name` like how we access a property
//  note that we are not invoking the
// `name` even thought it's a "method" 👇🏽
console.log(lexus.name); // Lexus ✅

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 getter method for the name class field. To do that we can start by first creating a method that returns the name field value using the this operator and also prefixing the method with the keyword get. Yes, that's all there is to do to make a getter 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;
  }

  // getter method for the `name` class field
  get getName() {
    return this.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;
  }

  // getter method for the `name` class field
  get getName() {
    return this.name;
  }
}

// create an instance of the `Car` class
const lexus = new Car("Lexus", 2022);

// cool part is that we can use
// `getName` like how we access a property
//  note that we are not invoking the
// `getName` even thought it's a "method" 👇🏽
console.log(lexus.getName); // Lexus ✅

If you look closely at the above code you can see that we are using the getName like how we access just a normal property in an object and not invoking it even though it's a method. Every getter method can be accessed like a property.

Yeah, this is the surprise I was talking about. Cool Right 🤩!

Now you may think that why do we even go for the hassle in making the getter method for the name field? We can simply access it 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 accessing the field itself.

Now for naming purposes let's rename the name field to _name and the getName getter 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;
  }

  // getter method for the `_name` class field
  get name() {
    return this._name;
  }
}

// create an instance of the `Car` class
const lexus = new Car("Lexus", 2022);

// cool part is that we can use
// `name` like how we access a property
//  note that we are not invoking the
// `name` even thought it's a "method" 👇🏽
console.log(lexus.name); // Lexus ✅

We have successfully created a getter 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 😃.

---