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 😃!
Top comments (0)