To create methods in the class that can be accessed without creating an instance of the class, you need to define the method as a static
member of the class in TypeScript. To create a static
member you need to write the keyword static
followed by the method definition in the class.
TL;DR
// a simple class with 2 fields,
// a constructor, and a static method
class Person {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
// this is now a static method
static sayGreeting() {
console.log(`Hi, Person`);
}
}
// access or call the `sayGreeting` method
// without creating an instance of the class
Person.sayGreeting(); // Hi, Person ✅
For example, let's say we have a class called Person
with 2 fields called name
and age
, a constructor, a method like this,
// a simple class with 2 fields,
// a constructor, and a method
class Person {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
sayGreeting() {
console.log(`Hi, ${this.name}`);
}
}
Now the sayGreeting
method can only be accessed when you create an instance of the class.
But we need to just attach it to the class itself and be able to access that method/member without creating an instance of the Person
class. To do that we need to use the static
keyword before writing the method definition.
Let's make the sayGreeting
method into a static
method.
It can be done like this,
// a simple class with 2 fields,
// a constructor, and a static method
class Person {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
// this is now a static method
static sayGreeting() {
console.log(`Hi, ${this.name}`);
}
}
Now since we have made the sayGreeting
method into a static method the this
operator doesn't work since we do not have an instance of the class to point to. So let's change the method to say Hi, Person
instead of like this,
It can be done like this,
// a simple class with 2 fields,
// a constructor, and a static method
class Person {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
// this is now a static method
static sayGreeting() {
console.log(`Hi, Person`);
}
}
Now let's access the method without creating an instance of the Person
class like this,
// a simple class with 2 fields,
// a constructor, and a static method
class Person {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
// this is now a static method
static sayGreeting() {
console.log(`Hi, Person`);
}
}
// access or call the `sayGreeting` method
// without creating an instance of the class
Person.sayGreeting(); // Hi, Person ✅
As you can see that we were able to call the sayGreeting
static method in the Person
class and the output of Hi, Person
is logged to the console.
We have successfully created a class method that can be accessed without creating a class instance. Yay 🥳!
See the above code live in codesandbox.
That's all 😃!