Static Members in TypeScript

Static members are properties or methods that belong to the class instead of individual objects.

class Student {
    static schoolName: string = "ABC School";
}

The static keyword is used to declare a static property or method.

class Student {
    static count: number = 0;
}

A static property belongs to the class itself.

class Student {
    static school: string = "Soopro Pathshala";
}

It is accessed using the class name.

class Student {
    static school: string = "Soopro Pathshala";
}

console.log(Student.school);

No object is required to access a static property.

class Student {
    static school: string = "ABC School";
}

const student = new Student();

// Not the correct way
// console.log(student.school);

Static members should be accessed through the class name.

A static method belongs to the class rather than an individual object.

class Student {
    static showMessage(): void {
        console.log("Welcome Student");
    }
}

class Student {
    static showMessage(): void {
        console.log("Welcome Student");
    }
}

Student.showMessage();

A static method is called using the class name.

Instance members belong to individual objects, while static members belong to the class.

class Student {

    name: string = "Rahul";

    static school: string = "ABC School";
}

const student = new Student();

console.log(student.name);
console.log(Student.school);

A static property has one value associated with the class, rather than a separate copy for every object.

class Student {
    static school: string = "ABC School";
}

const student1 = new Student();
const student2 = new Student();

console.log(Student.school);

class Student {
    static school: string = "ABC School";
}

Student.school = "XYZ School";

console.log(Student.school);

A static property can be changed through the class name unless it has been declared as readonly.

A common use of static properties is keeping a count of objects created from a class.

class Student {
    static count: number = 0;

    constructor() {
        Student.count++;
    }
}

class Student {
    static count: number = 0;

    constructor() {
        Student.count++;
    }
}

const student1 = new Student();
const student2 = new Student();
const student3 = new Student();

console.log(Student.count);

The value of Student.count becomes 3.

class Calculator {

    static add(a: number, b: number): number {
        return a + b;
    }
}

console.log(Calculator.add(10, 20));

class Calculator {

    static add(a: number, b: number): number {
        return a + b;
    }

    static multiply(a: number, b: number): number {
        return a * b;
    }
}

console.log(Calculator.add(5, 10));
console.log(Calculator.multiply(5, 10));

Inside a static method, this refers to the class itself.

class Student {

    static school: string = "ABC School";

    static showSchool(): void {
        console.log(this.school);
    }
}

Student.showSchool();

class Company {

    static name: string = "Sooprosoft";

    static showCompany(): void {
        console.log(Company.name);
    }
}

Company.showCompany();

A static method can access static members directly using the class name.

A static method does not have access to a particular object, so it cannot directly access an instance property.

class Student {

    name: string = "Rahul";

    static showName(): void {
        // Cannot directly access name here
    }
}

Static members can also use access modifiers such as public, private, and protected.

class Student {

    public static school: string = "ABC School";

    private static count: number = 0;
}

A private static property can only be accessed from inside the class.

class Counter {

    private static count: number = 0;

    static increase(): void {
        Counter.count++;
    }

    static getCount(): number {
        return Counter.count;
    }
}

Counter.increase();
Counter.increase();
Counter.increase();

console.log(Counter.getCount());

The private counter is controlled through public static methods.

A static property can also be declared readonly when its value should not be reassigned after initialization.

class AppConfig {

    static readonly appName: string = "My App";
}

class AppConfig {

    static readonly appName: string = "Student App";
    static readonly version: string = "1.0.0";
}

console.log(AppConfig.appName);
console.log(AppConfig.version);

Static readonly properties are useful for values shared across the application.

A static method can be used to create and return an object.

class Student {

    constructor(public name: string) {
    }

    static create(name: string): Student {
        return new Student(name);
    }
}

const student = Student.create("Rahul");

console.log(student.name);

A class containing only static methods can be used as a collection of utility functions.

class StringHelper {

    static toUpper(value: string): string {
        return value.toUpperCase();
    }

    static toLower(value: string): string {
        return value.toLowerCase();
    }
}

console.log(StringHelper.toUpper("hello"));
console.log(StringHelper.toLower("HELLO"));

Static members can be inherited by derived classes.

class Person {

    static category: string = "Human";
}

class Student extends Person {
}

console.log(Student.category);

class Student {

    static totalStudents: number = 0;

    constructor(
        public name: string
    ) {
        Student.totalStudents++;
    }

    static showTotal(): void {
        console.log(
            "Total Students:",
            Student.totalStudents
        );
    }
}

const student1 = new Student("Rahul");
const student2 = new Student("Priya");
const student3 = new Student("Amit");

Student.showTotal();

• Trying to access a static member through an object.
• Trying to access an instance property directly from a static method.
• Forgetting the static keyword.
• Calling a static method through an object.
• Changing a static readonly property.
• Confusing class-level data with object-level data.

Static members are useful when a value or operation belongs to the class as a whole rather than to a specific object.

• Application configuration.
• Counters shared by all objects.
• Utility functions.
• Factory methods.
• Constants shared across objects.
• Common class-level information.

class Student {

    static schoolName: string = "Soopro Pathshala";

    static totalStudents: number = 0;

    constructor(
        public name: string,
        public course: string
    ) {
        Student.totalStudents++;
    }

    showDetails(): void {
        console.log("Name:", this.name);
        console.log("Course:", this.course);
    }

    static showSchool(): void {
        console.log(
            "School:",
            Student.schoolName
        );
    }

    static showTotalStudents(): void {
        console.log(
            "Total Students:",
            Student.totalStudents
        );
    }
}

const student1 = new Student(
    "Rahul",
    "TypeScript"
);

const student2 = new Student(
    "Priya",
    "React Native"
);

student1.showDetails();
student2.showDetails();

Student.showSchool();
Student.showTotalStudents();

In this example, schoolName and totalStudents belong to the class, while name and course belong to individual student objects.