Static Getter

A static getter in TypeScript is an accessor method defined on a class constructor rather than its prototype. Declared using the combined static and get modifiers, it binds a property name to a function that executes implicitly when the property is accessed directly on the class itself, returning a dynamically computed value.

Syntax

class ClassName {
    static get propertyName(): ReturnType {
        // Execution logic
        return value;
    }
}

Technical Characteristics

• Execution Context (this): Inside a static getter, the this keyword refers to the class constructor object, not an instance of the class. Consequently, a static getter cannot access instance properties or instance methods. It can only access other static members.
• Implicit Invocation: The getter is invoked by accessing the property name without parentheses. The underlying function executes synchronously during the property lookup.
• Read-Only Inference: If a static get is declared without a corresponding static set for the same property name, TypeScript automatically infers the property as readonly. Any attempt to assign a value to it will result in a compile-time error.
• Type Checking: TypeScript strictly enforces that the value returned by the getter matches its declared return type. If no return type is explicitly provided, TypeScript infers it from the return statement.

Mechanics Example

class Entity {
    private static _internalCounter: number = 0;

    // Definition of the static getter
    static get counter(): number {
        // 'this' refers to the Entity class constructor
        return this._internalCounter; 
    }
}

// Invocation: Accessed directly on the class, not an instance
const currentCount: number = Entity.counter; 

// Compile-time error: Cannot assign to 'counter' because it is a read-only property.
// Entity.counter = 5; 

Compilation Target Behavior

The emitted JavaScript varies based on the target specified in the compiler options. When targeting ES5, TypeScript transpiles static getters using Object.defineProperty applied directly to the constructor function. When targeting ES6 (ES2015) or higher, TypeScript preserves the native static get syntax.

// Transpiled JavaScript (ES5 target)
var Entity = /** @class */ (function () {
    function Entity() {
    }
    Object.defineProperty(Entity, "counter", {
        get: function () {
            return this._internalCounter;
        },
        enumerable: false,
        configurable: true
    });
    Entity._internalCounter = 0;
    return Entity;
}());

// Transpiled JavaScript (ES6 / ES2015+ target)
class Entity {
    static get counter() {
        return this._internalCounter;
    }
}
Entity._internalCounter = 0;

Master TypeScript with Deep Grasping Methodology!

Learn More