TypeScript Static Properties and Methods

Note: If you're new to TypeScript, check our Getting Started with TypeScript tutorial first.

In TypeScript, the static keyword is used to create static properties and methods.

Static properties and methods belong to the class itself, and not to any individual instances of the class. In other words, they are shared among all instances of the class.

Static properties and methods are useful for data or behavior that is common to all instances.

TypeScript Static Properties

To create a static property, we use the static keyword before the property name. For example,

class Dog {
    // Declare a static property
    static bark: string = "Woof!";

    constructor(private name: string, private owner: string) {}
    
    dogIntro(): string {
        return `${this.name} loves its owner, ${this.owner}, and says ${Dog.bark}`;
    }
}

// Create instances of Dog class
let dog1 = new Dog("Wolfie", "Jessica");
let dog2 = new Dog("Honey", "James");

console.log(dog1.dogIntro());
console.log(dog2.dogIntro());

// Access the static property outside the class
console.log(`All dogs say ${Dog.bark}`);

Output

Wolfie loves its owner, Jessica, and says Woof!
Honey loves its owner, James, and says Woof!
All dogs say Woof!

Here, we have created a static property bark inside the Dog class. Thus, a single copy of bark is shared by all instances of Dog.

On the other hand, each instance of Dog will have its own copy of non-static properties and methods, i.e., name, owner, and dogIntro().

Static Properties Are Accessed Using the Class Name

In the previous example, notice how the static property is accessed both inside and outside the class:

class Dog {
    ... ... ...

    // Access the static property inside the class    
    dogIntro(): string {
        return `${this.name} loves its owner, ${this.owner}, and says ${Dog.bark}`;
    }
}

... ... ...

// Access the static property outside the class
console.log(`All dogs say ${Dog.bark}`);

Usually, we use this to access non-static properties inside the class, while we use the object name (dog1 or dog2) to access those properties outside the class.

However, we use the class name to access static properties since they belong to the class itself, rather than to individual instances of the class:

// Valid way to access static property
Dog.bark

// Invalid ways to access static property (inside class)
this.bark

// Invalid ways to access static property (outside class)
dog1.bark
dog2.bark

Note: You can use this to access static properties inside a static method.

Example 1: TypeScript Static Properties

class Employee {
    static headcount: number = 0; // Static property

    constructor(private name: string, private jobTitle: string) {
        // Increment headcount whenever a new instance is created
        Employee.headcount++;
    }
    
    getInfo(): void {
        console.log(`Employee: ${this.name}`);
        console.log(`Job Title: ${this.jobTitle}\n`);
    }
}

let employee1 = new Employee("John Doe", "Developer");
let employee2 = new Employee("Jane Doe", "Designer");

// Print the employee details
employee1.getInfo();
employee2.getInfo();

// Print the static property
console.log(`Headcount: ${Employee.headcount}`);

Output

Employee: John Doe
Job Title: Developer

Employee: Jane Doe
Job Title: Designer

Headcount: 2

In this program, we've created a static property headcount that is incremented each time we create an instance of the Employee class.

Initially, the value of headcount is 0.

And since we then proceeded to create two Employee instances (employee1 and employee2), the final value of headcount is 2.

TypeScript Static Methods

Like static properties, static methods belong to the class itself rather than to individual instances.

To create a static method, we use the static keyword before the method name. For example,

class Dog {
    private static bark: string = "Woof!";

    constructor(private name: string, private owner: string) {}
    
    dogIntro(): string {
        return `${this.name} loves its owner, ${this.owner}, and says ${Dog.bark}`;
    }

    // Create a static method that returns the static property
    static getBark(): string {
        return Dog.bark;
    }
}

// Create instances of Dog class
let dog1 = new Dog("Wolfie", "Jessica");
let dog2 = new Dog("Honey", "James");

console.log(dog1.dogIntro());
console.log(dog2.dogIntro());

// Access the static method
let dogBark: string = Dog.getBark();

console.log(`All dogs say ${dogBark}`);

Output

Wolfie loves its owner, Jessica, and says Woof!
Honey loves its owner, James, and says Woof!
All dogs say Woof!

Here, the static method getBark() returns the value of the private static property bark.

Outside the class, we accessed the static method by using the class name instead of the objects dog1 or dog2:

// Access the static method
let dogBark: string = Dog.getBark();

Example 2: TypeScript Static Methods

class Circle {

    // Static constant
    static readonly PI: number = 3.14159;

    static calculateArea(radius: number): number {
        return Circle.PI * radius * radius;
    }
}

// Access static property
console.log(`Value of PI: ${Circle.PI}`);

// Access static method
let area: number = Circle.calculateArea(5);
console.log(`Area of Circle: ${area}`);

Output

Value of PI: 3.14159
Area of Circle: 78.53975

Here, PI is a static constant, and calculateArea() is a static method. Thus, they're both shared by all instances of the Circle class.

Note: We use the readonly access modifier to declare class properties as constants. On the other hand, the const keyword is used to declare normal variables as constants.

class Dog {
    static bark: string = "Woof!";

    constructor(private name: string, private owner: string) {}
    
    dogIntro(): string {
        return `${this.name} loves its owner, ${this.owner}.`;
    }

    // Use 'this' inside a static method
    static getBark(): string {
        return Dog.bark;
    }
}

// Access static property
console.log(`Say ${Dog.bark}`);

// Access static method
let dogBark: string = Dog.getBark();
console.log(`All dogs say ${dogBark}`);

Say Woof!
All dogs say Woof!

// Error: Property 'dogIntro' does not exist on type 'typeof Dog'.
console.log(Dog.dogIntro());

class Dog {
    constructor(private name: string, private owner: string) {}
    
    dogIntro(): string {
        return `${this.name} loves its owner, ${this.owner}.`;
    }
}

let dog1 = new Dog("Wolfie", "Jessica");
let dog2 = new Dog("Honey", "James");

console.log(dog1.dogIntro());
console.log(dog2.dogIntro());

// Output:
// Wolfie loves its owner, Jessica.
// Honey loves its owner, James.

class Dog {
    private static bark: string = "Woof!";

    constructor(private name: string, private owner: string) {}
    
    dogIntro(): string {
        return `${this.name} loves its owner, ${this.owner}.`;
    }

    // Use 'this' inside a static method
    static getBark(): string {
        return this.bark;
    }
}

let dog1 = new Dog("Wolfie", "Jessica");
let dog2 = new Dog("Honey", "James");

console.log(dog1.dogIntro());
console.log(dog2.dogIntro());

let dogBark: string = Dog.getBark();
console.log(`All dogs say ${dogBark}`);

Wolfie loves its owner, Jessica.
Honey loves its owner, James.
All dogs say Woof!

static getBark(): string {
    return this.bark;
}

class Dog {

    // Non-static property
    breed: string;

    constructor(breed: string) {
        this.breed = breed;
    }

    // Static method
    static getBreed(): void {
    
        // Error because getBreed() is static but breed is not
        console.log(this.breed);
    }
}

class Dog {
    // Declare a static property
    static bark: string = "Woof!";

    constructor(private name: string, private owner: string) {}
    
    // Non-static method that accesses
    // both static and non-static properties
    dogIntro(): string {
        return `${this.name} loves its owner, ${this.owner}, and says ${Dog.bark}`;
    }
}

let dog1 = new Dog("Wolfie", "Jessica");
console.log(dog1.dogIntro());

// Output: Wolfie loves its owner, Jessica, and says Woof!

Read More:

• TypeScript Abstract Class and Method
• TypeScript Classes