How to Define Static Property in TypeScript Interface?

A static property in a class is a property that belongs to the class itself, rather than to instances of the class. It is shared among all instances of the class and can be accessed without creating an instance of the class. Static properties are defined using the static keyword in front of the property.

In TypeScript, interfaces are used to define the shape of instance members of a class or object. Since static properties belong to the class itself and not to instances, they are not part of the shape defined by an interface. Thus, you can't directly define static properties in an interface.

Solution for Defining Static Properties TypeScript interface:

To work around this limitation, you can use a combination of a class and an interface. The class will implement the interface, and you can include the static property directly in the class. This approach provides a clear separation between instance and static properties.

Example: In the example below, the static property staticProperty is directly defined within the MyClass class, and the class implements the MyInterface interface for instance-level properties.

interface MyInterface {
    instanceProperty: string;
}

class MyClass implements MyInterface {
    static staticProperty: string = "Static Value";
    instanceProperty: string;

    constructor(instanceValue: string) {
        this.instanceProperty = instanceValue;
    }
}

// Accessing the static property without creating an instance
console.log(MyClass.staticProperty);

// Creating an instance of the class to access instance properties
const myInstance = new MyClass("Instance Value");
console.log(myInstance.instanceProperty);

Output:

Static Value
Instance Value