Creating class methods in TypeScript can be done by writing the name of the method we need to define followed by the ()
parameters symbol (opening and closing brackets) with any parameters and their types if any, followed by the :
symbol (colon) and then the type
of the value that should be returned by the method (To put it simply, methods are functions inside classes).
TL;DR
// a simple class with some fields and
// a constructor to intialise the field values
class Person {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
// a method that returns a greeting
sayGreeting(): string {
return `Hey ${this.name}`;
}
}
// create an instance of the class
const john = new Person("John Doe", 23);
// call the `sayGreeting` method
// from the `john` object
const greeting = john.sayGreeting();
// log the contents
console.log(greeting); // Hey John Doe ✅
For example, let's say we have a class called Person
with 2 fields called name
having the type of string
and age
having the type of number
respectively, and then a constructor to initialize the values of the field like this,
// a simple class with some fields and
// a constructor to initialize the field values
class Person {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
}
Now let's make a method called sayGreeting
that returns a greeting with the value from the name
field.
It can be done like this,
// a simple class with some fields and
// a constructor to initialize the field values
class Person {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
// a method that returns a greeting
sayGreeting(): string {
return `Hey ${this.name}`;
}
}
So if you look closely at the Person
class, you can see that we have defined a method called sayGreeting
followed by the parameters brackets where we have not added any parameters followed by the :
symbol (colon) and then the type of string
as the return value of the method. This is all you need to make a simple class method in TypeScript.
Now let's create an instance of the Person
class using the new
keyword and then pass the values of "John Doe" to the name
parameter and 23
to the age
parameter through the parameter brackets like this,
// a simple class with some fields and
// a constructor to initialize the field values
class Person {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
// a method that returns a greeting
sayGreeting(): string {
return `Hey ${this.name}`;
}
}
// create an instance of the class
const john = new Person("John Doe", 23);
Finally, let's call the sayGreeting()
method from the john
object and then log the contents like this,
// a simple class with some fields and
// a constructor to initialize the field values
class Person {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
// a method that returns a greeting
sayGreeting(): string {
return `Hey ${this.name}`;
}
}
// create an instance of the class
const john = new Person("John Doe", 23);
// call the `sayGreeting` method
// from the `john` object
const greeting = john.sayGreeting();
// log the contents
console.log(greeting); // Hey John Doe ✅
As you can see that we got the output of Hey John Doe
after calling the sayGreeting()
method.
We have successfully created a class method in TypeScript. Yay 🥳.
See the above code live in codesandbox.
That's all 😃!