TypeScript Static Members

This chapter focuses on static members in TypeScript, a feature that allows developers to define properties and methods that belong to the class itself rather than an instance of the class. Static members are particularly useful for utility functions, constants, and shared data.

Chapter Goal

  • To understand what static members are and their role in TypeScript.
  • To learn how to define and use static properties and methods.
  • To explore practical applications of static members in real-world scenarios.

Key Characteristics for TypeScript Static Members

  • Class-Level Association: Static members are accessed via the class name rather than an instance.
  • Shared Across Instances: Static properties and methods are shared among all instances of a class.
  • Utility and Constants: Ideal for defining constants and utility functions.
  • No this Reference: Static methods cannot access instance-specific properties or methods directly.
  • Compile-Time Checks: TypeScript enforces access rules for static members.

Basic Rules for TypeScript Static Members

  1. Use the static keyword to define static properties and methods.
  2. Access static members using the class name, not an instance.
  3. Avoid referencing instance members inside static methods.
  4. Use static properties for shared data or constants.
  5. Use static methods for utility functions that don’t depend on instance data.

Best Practices

  1. Use meaningful names for static members to indicate their shared nature.
  2. Avoid overusing static members in cases where instance-level behavior is appropriate.
  3. Document the purpose of static members to improve code readability.
  4. Combine static methods with namespaces or modules for organization.
  5. Regularly review static members to ensure they are used appropriately.

Syntax Table

Serial No Component Syntax Example Description
1 Static Property static count: number = 0; Declares a static property shared across instances.
2 Static Method static getInstanceCount(): number { return this.count; } Defines a static method accessible via the class.
3 Access Static Members ClassName.member Accesses static properties or methods.
4 Utility Class class MathUtil { static square(x: number): number { return x * x; } } Implements a utility class.
5 Static Initializer static { StaticClass.count = 100; } Initializes static properties.

Syntax Explanation

1. Static Property

What is a Static Property

A property that belongs to the class itself and is shared among all instances.

Syntax

class Counter {

  static count: number = 0;

 

  static increment(): void {

    Counter.count++;

  }

}

Detailed Explanation

  • The count property is defined as static, meaning it belongs to the Counter class.
  • Access or modify the count property using the class name, Counter.
  • Static properties are not replicated for individual class instances.

Example

Counter.increment();

console.log(Counter.count); // Output: 1

Counter.increment();

console.log(Counter.count); // Output: 2

Output

1

2

Notes

  • Static properties are ideal for tracking global counts or shared data.

Warnings

  • Avoid excessive reliance on static properties, as it can lead to tightly coupled code.

2. Static Method

What is a Static Method

A method that belongs to the class itself and can be called without creating an instance.

Syntax

class MathUtil {

  static square(x: number): number {

    return x * x;

  }

}

Detailed Explanation

  • Static methods are useful for operations that do not depend on instance-specific data.
  • Call the method using the class name, e.g., MathUtil.square(5).

Example

console.log(MathUtil.square(4)); // Output: 16

console.log(MathUtil.square(7)); // Output: 49

Output

16

49

Notes

  • Use static methods for utility functions, calculations, or validations.

Warnings

  • Static methods cannot access non-static properties or methods directly.

3. Accessing Static Members

How to Access Static Members

Static members are accessed using the class name, not an instance.

Syntax

class Logger {

  static logLevel: string = ‘INFO’;

 

  static log(message: string): void {

    console.log(`[${Logger.logLevel}] ${message}`);

  }

}

Detailed Explanation

  • Static properties and methods are accessed directly via the class name.
  • Static members are not available through instances of the class.

Example

Logger.log(‘Application started.’); // Output: [INFO] Application started.

Logger.logLevel = ‘DEBUG’;

Logger.log(‘Debugging…’); // Output: [DEBUG] Debugging…

Output

[INFO] Application started.

[DEBUG] Debugging…

Notes

  • Accessing static members directly via the class name ensures clarity.

Warnings

  • Do not attempt to access static members via instances, as this will result in errors.

4. Utility Class

What is a Utility Class

A class that groups related static methods and properties.

Syntax

class MathUtil {

  static square(x: number): number {

    return x * x;

  }

 

  static cube(x: number): number {

    return x * x * x;

  }

}

Detailed Explanation

  • Utility classes typically contain static methods that perform common tasks or calculations.
  • These classes do not require instantiation.

Example

console.log(MathUtil.square(3)); // Output: 9

console.log(MathUtil.cube(2)); // Output: 8

Output

9

8

Notes

  • Utility classes help organize and reuse code efficiently.

Warnings

  • Avoid adding instance-specific behavior to utility classes.

5. Static Initializer

What is a Static Initializer

A block of code that initializes static properties when the class is loaded.

Syntax

class Config {

  static readonly appName: string;

  static readonly version: string;

 

  static {

    Config.appName = ‘MyApp’;

    Config.version = ‘1.0.0’;

  }

}

Detailed Explanation

  • The static initializer block runs once when the class is first loaded.
  • It is useful for setting up complex static properties.

Example

console.log(Config.appName); // Output: MyApp

console.log(Config.version); // Output: 1.0.0

Output

MyApp

1.0.0

Notes

  • Use static initializers for initializing properties that require complex logic.

Warnings

  • Ensure static initializers do not have side effects or depend on external inputs.

Real-Life Project

Project Name

Global Application Settings

Project Goal

Demonstrates how to use static members to define global application settings that are accessible throughout the codebase.

Code for This Project

class AppSettings {

  static readonly appName: string = 'GlobalApp';

  static version: string = '1.0.0';

  static environment: string = 'development';




  static updateEnvironment(env: string): void {

    AppSettings.environment = env;

  }

}




console.log(AppSettings.appName); // Output: GlobalApp

console.log(AppSettings.version); // Output: 1.0.0

console.log(AppSettings.environment); // Output: development




AppSettings.updateEnvironment('production');

console.log(AppSettings.environment); // Output: production

Save and Run

  1. Save the code in your development environment, such as Visual Studio Code, ensuring the file is named appSettings.ts.
  2. Compile the TypeScript code into JavaScript using the command tsc appSettings.ts in your terminal.
  3. Execute the resulting JavaScript file using the command node appSettings.js.

Expected Output

GlobalApp

1.0.0

development

production

Insights

  • Static members provide a centralized way to manage shared data and functions.
  • They are ideal for global configurations, constants, and utility functions.
  • Real-world scenarios like application settings showcase their practical utility.

Key Takeaways

  • Static members belong to the class itself, not to individual instances.
  • Use static properties for shared data and constants.
  • Use static methods for reusable logic that doesn’t depend on instance-specific data.