TypeScript static members

TypeScript static members

In TypeScript we can use static properties and methods inside classes. This article details how to use them, and how they transform into ES3/ES5 JavaScript, so that our code can run in all the current and not so current browsers.

TypeScript is not the only way of using classes and static properties or methods in JavaScript. Actually, classes have become a part of the final ES6 specification. Writing plain JavaScript we can also use classes. But when using TypeScript we get the benefit of the optional typing.

About classes and inheritance

First, a word of caution: being able to use classes does not mean that we should always opt for using them. It is outside of the scope of this article, but, as a rule of thumb, when using classes and OOP, we should be careful and try to favour composition over inheritance.

TypeScript static properties and methods

Let’s dive into some code directly, and then we will review each part of it. It is a simple class with a public method, a static method and a static property. Also, the constructor increases the static property, which is a number.

class MyClassWithStaticMembers {
    static aStaticCounter: number = 0;
    aPublicNumber: number = 0;
    constructor() {
        console.log(MyClassWithStaticMembers.aStaticCounter++);
    }
    aPublicMethod() {
        console.log("This is a public method")
    }
    static aStaticMethod() {
        console.log("This is a static method")
    }
}

MyClassWithStaticMembers.aStaticMethod(); // This is a static method

let foo = new MyClassWithStaticMembers(); // 0
let bar = new MyClassWithStaticMembers(); // 1
foo.aPublicMethod() // This is a public method

foo.aStaticMethod() // Error
MyClassWithStaticMembers.aPublicMethod() // Error

We can see that it works much like we would expect. TypeScript static methods are accessed by using the class, as we can see with MyClassWithStaticMembers.aStaticMethod();. Static methods and properties are separated from the class instances, as we can see with the static counter increasing when we instantiate foo and bar.

Also note that we cannot access static members directly from the object instances, that is why foo.aStaticMethod() gives us an error. The classes have a static part and a non-static part.

The compiled JavaScript code

Let’s take a look at the resulting compiled JavaScript to understand what is going on.

var MyClassWithStaticMembers = (function () {
    function MyClassWithStaticMembers() {
        console.log(MyClassWithStaticMembers.aStaticCounter++);
    }
    MyClassWithStaticMembers.prototype.aPublicMethod = function () {
        console.log("This is a public method");
    };
    MyClassWithStaticMembers.aStaticMethod = function () {
        console.log("This is a static method");
    };
    MyClassWithStaticMembers.aStaticCounter = 0;
    return MyClassWithStaticMembers;
}());

As we can see, classes get changed into functions. Instance methods are set into the prototype, while static members are assigned to the constructor function. That is why we can access static methods anytime, but they are not accessible from an instance.

Conclusion

We can use TypeScript static properties and methods inside classes. The instance members and the static members are completely separated. The instance members belong to each instance, but the static members are shared accross.

  • piep

    But how do implement it threadsafe?

  • Ammar Hasan

    i can’t see “aPublicNumber” in compiled javascript code

Comments are closed.