Static Properties and Methods in TypeScript

In this post you’ll learn about the static keyword in TypeScript classes so you can confidently use them on properties and methods.

Before you can understand what “static” means, you need to understand what static is NOT. An instance is NOT static. An instance is created via the new keyword.

Here’s an example:

class Coupon {
  code: string;
  percentage: number;
  constructor(code: string, percentage: number) {
    this.code = code;
    this.percentage = percentage;
  }
  getCoupon() {
    return {
      code: this.code,
      percentage: this.percentage
    };
  }
}

To create a new Coupon we can use the new keyword. Each coupon is then independent, a unique instance. An instance is not the same as another, and therefore new Coupon() will never be the same each time it is called, allowing the methods to return correct data independently:

const tenOff = new Coupon('TENOFF', 10);
const twentyOff = new Coupon('TWENTYOFF', 20);

tenOff.getCoupon(); // { code: 'TENOFF', percentage: 10 }
twentyOff.getCoupon(); // { code: 'TWENTYOFF', percentage: 20 }

Excellent! This code may be part of a workflow that allows an Admin to create new coupons, a shop for example.

So now we understand an instance, we know what static is. Static is when you reference a class without using the new keyword. Hence the word “static”. It is a property, or method, accessible to use without creating a new instance.

Let’s assume that our class Coupon also has the capability to validate a coupon on the server before we visit the checkout, we could access it simply to use it for its static method utility:

class Coupon {
  code: string;
  percentage: number;
  constructor(code: string, percentage: number) {
    this.code = code;
    this.percentage = percentage;
  }
  static validate() {
    // fetch(...)
  }
}

We can then use it like this:

Coupon.validate('TENOFF');

This could then make a fetch request to an API to validate the integrity of the TENOFF coupon, and bring back a yes/no answer for us as to whether it was valid. Regardless of your use-case, the way we create static properties in TypeScript is the same.

Notice that we do not use the new keyword, and the Coupon class is used independently of any instance - making it completely static.

What’s also great is we can combine these modifiers such as static with other natives such as async:

class Coupon {
  code: string;
  percentage: number;
  constructor(code: string, percentage: number) {
    this.code = code;
    this.percentage = percentage;
  }
  static async validate() {
    // await fetch(...)
  }
}

It’s also interesting to see the compiled code output for this to see how JavaScript works behind-the-scenes (I always love to learn more):

var Coupon = /** @class */ (function () {
  function Coupon(code, percentage) {
    this.code = code;
    this.percentage = percentage;
  }
  Coupon.prototype.getCoupon = function () {
    return {
      code: this.code,
      percentage: this.percentage
    };
  };
  Coupon.validate = function () {
    // fetch(...)
  };
  return Coupon;
}());

Interesting, right? So what we’ve learned here is that by not attaching a method or property to the prototype object of a constructor, it becomes a static property for access.

If you’d like to explore TypeScript more deeply and understand the language to the fullest, I’d love to keep teaching you via my TypeScript Courses, which will take your skills from “understanding a little bit” to fully mastering TypeScript and its advanced features!

I hope you enjoyed uncovering static and instance properties in this post!