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 😃!