TypeScript Static Methods Tutorial

In this TypeScript tutorial we learn about static methods that belong to a class, instead of an instance of a class.

We cover the 'static' keyword, how to define and invoke them as well as what happens when static methods have the same name.


Note: The examples in this lesson should be compiled with the compiler flag –target es6 or higher.

What is a static class method

A static class method is a method that belongs to the class itself, not the instance of a class.

That means we don’t need an object to call a static class method. We call them directly from the class itself.

As an example, let’s consider a class called “Person”. Our Person has an age property and a birthday() method that increases the age by 1.

Typically, we would need to instantiate a new object to be able to access the method.

Example: Object instance of a class
class Person {

  age = 28;

  birthday() {
    this.age += 1;
    console.log("Hooray! Im, " + this.age);
  }
}

// instantiate
var p1 = new Person();

// access method
p1.birthday();

Now the birthday() method belongs to the “p1” object instance. So what does that mean?

It means that the method can only operate on the “p1” object. “p1” could never affect the age of “p2”.

A static method belongs to the class itself and it could potentially affect the ages of both “p1” and “p2”. Because it belongs to the class, we have to invoke it directly on the class, not on an object.

Example: Invoke a static method on a class
// access method
Person.birthday();

How to define a static class method

To define a static class method, we replace the function keyword with the static keyword in front of a method definition in a class.

Syntax: Define static method
static method_name() {
  // body
}
Example: Define static method
class Person {

  static walk() {
    console.log("Walking...");
  }
}

Static methods and access modifiers

TypeScript allows us to encapsulate our static methods with access modifiers, just like regular methods.

To do this, we specify one of the following three access modifiers before the static keyword.

  • public
  • private
  • protected
Syntax: Access modifiers on static methods
public static method_name() {}

private static method_name() {}

protected static method_name() {}

Note: The public modifier is the default and doesn’t have to be specified explicitly.

Example: The public modifier is default
public static method_name() {}

// is the same as

static method_name() {}

How to call a static class method

As we’ve mentioned before, a static method doesn’t need an object in order for us to use it. It can be called directly from the class with dot notation.

Example: Invoke a static method
class Person {

  static walk() {
    console.log("Walking...");
  }
}

// invoke method directly
// from the 'Person' class
Person.walk();

In the example above, we invoke the method without creating an object. If we compile and run the script, it will print the “Walking…” text to the console.

Static class methods with duplicate names

In Javascript, we may have as many static class methods as we need, even ones with similar names.

If we do have static methods with similar names, the compiler will always invoke the last one.

Example: Javascript duplicate static methods
<script>

  class Person {

    static walk() {
      document.write("Walking first...");
    }

    static walk() {
      document.write("Walking last...");
    }
  }

  Person.walk();

</script>

In the Javascript example above, the translator will run the second walk() method.

But, in TypeScript this isn’t allowed, the compiler will raise an error.

Output: Duplicates not allowed in TypeScript
main.ts:3:10 - error TS2393: Duplicate function implementation.

3   static walk() {
           ~~~~

main.ts:7:10 - error TS2393: Duplicate function implementation.

7   static walk() {
           ~~~~

Static class properties

We are not limited to using only static methods. TypeScript allows us to declare our properties as static as well.

Static properties are also defined with the static keyword in front of the property name, and are accessed directly on the class with dot notation.

Example: Static property
class Person {

  static age = 28;
}

console.log(Person.age);

Static methods can mutate static properties

At the start of the lesson we mentioned that a static method could potentially affect a static property. Well it’s true, but only if that property is also static.

We’ll use the birthday example from before. But this time we’ll make the method static and try to invoke it on the class.

Example: Static method can't mutate non-static member
class Person {

  age = 28;

  static birthday() {
    this.age += 1;
    console.log("Hooray! Im, " + this.age);
  }
}

Person.birthday();

If we try to compile the script, TypeScript will raise the following error.

Output: Object instance of a class
Property 'age' does not exist on type 'typeof Person'.

That’s because age is instance property, it belongs to an object and cannot be affected outside of that object.

For the static method to be able to change the age, we have to declare it as static too.

Example: Static method can mutate static member
class Person {

  static age = 28;

  static birthday() {
    this.age += 1;
    console.log("Hooray! Im, " + this.age);
  }
}

Person.birthday();

When we compile and run the example above, it will show the age in the console.

Static members can't be accessed by object instances

TypeScript doesn’t allow a static property or method to be affected by an object instance.

Example: No static access through objects
class Person {

  static age = 28;

  static birthday() {
    this.age += 1;
    console.log("Hooray! Im, " + this.age);
  }
}

var p1 = new Person();

p1.age
p1.birthday()

We can instantiate the object just fine, but if we try to access the property or method, TypeScript will raise an error.

Output: Object instance of a class
Property 'age' is a static member of type 'Person'
Property 'birthday' is a static member of type 'Person'

A note on 'this' in static methods

Normally when we use the ‘this’ construct, it refers to the calling object. But when we use ‘this’ with a static member, it refers to the class.

Does TypeScript have static classes

No, because there’s really no need for them.

Languages like C# or Java force us to define all our data and methods to be inside a class. But TypeScript doesn’t have such a restriction, so a regular object or top-level function will do the job just as well.

Example: Objects instead of static classes
class Person {
  static birthday() {}
}

function birthday() {}

const UtilObject = {
  birthday() {}
}

Use static methods for utility

In a real world situation, static methods would typically be used for helper, or utility methods.

Let’s see an example that checks if a string contains a given word and returns true if it does.

Example: Utility static method
// Test string
let txt:string = "Lorem ipsum dolor sit amet.";

// Static method
export class Util {
  // Does a string contain a given substring
  public static contains(str:string, substr:string) {
    return str.indexOf(substr) !== -1;
  }
}

console.log( Util.contains(txt, 'sit') )

But as mentioned before, we can use objects or top-level functions to accomplish the same thing.

Example: Utility static method
// Test string
let txt:string = "Lorem ipsum dolor sit amet.";


// Static method
export class Util {
  public static contains(str:string, substr:string) {
    return str.indexOf(substr) !== -1;
  }
}
console.log( Util.contains(txt, 'sit') )


// Preferred 1: Top-level function
function contains(str:string, substr:string) {
  return str.indexOf(substr) !== -1;
}
console.log( contains(txt, 'amet') )


// Preferred 2: Helper object
const UtilObj = {
  contains(str:string, substr:string) {
    return str.indexOf(substr) !== -1;
  }
};
console.log( UtilObj.contains(txt, 'Shrek') )

Further Reading

For more information on the topics from this lesson, please see the links below:

Summary: Points to remember

  • A static class method belongs to a class, not an instance.
  • A static method uses the static keyword instead of the function keyword when we define it.
  • Static members can be encapsulated with the public, private and protected modifiers.
  • We call a static method directly on the class, using the class name and dot notation. We don’t need to create an object instance.
  • TypeScript does not allow more than one static method with the same name, the compiler will raise an error.
  • Class properties can be marked as static, as well as encapsulated.
  • Static members can only affect other static members.
  • Instance objects cannot access static members and static methods cannnot access instance members.
  • A static member’s ‘this’ construct refers to the class, not the calling object.
  • TypeScript doesn’t have static classes. Top-level functions and objects provide the same functionality.
  • Static methods are typically used as helper, or utility methods.