How to create methods that can be accessed without creating an instance of the class in TypeScript?

Originally posted here!

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

Feel free to share if you found this useful 😃.

---