TypeScript Static Methods and Properties

Introduction

In this chapter, we will explore static methods and properties in TypeScript. Static methods and properties belong to the class itself rather than to instances of the class. Understanding how to use static methods and properties is essential for writing utility functions and constants that do not require an instance of a class.

Table of Contents

• Definition
• Static Properties
• Static Methods
• Using Static Members
• Complete Example with Output
• Conclusion

Definition

Static methods and properties are defined on the class itself and not on instances of the class. They are shared by all instances of the class and can be accessed without creating an instance.

Static Properties

Definition

Static properties are properties that belong to the class itself rather than to any specific instance. They are defined using the static keyword.

Syntax

class ClassName {
  static propertyName: type;
}

Example

This example demonstrates a class with a static property.

class MathUtil {
  static PI: number = 3.14;
}

console.log(MathUtil.PI); // Output: 3.14

Output

3.14

Static Methods

Definition

Static methods are methods that belong to the class itself rather than to any specific instance. They are defined using the static keyword and can be called without creating an instance of the class.

Syntax

class ClassName {
  static methodName(parameters): returnType {
    // method implementation
  }
}

Example

This example demonstrates a class with a static method.

class MathUtil {
  static calculateArea(radius: number): number {
    return this.PI * radius * radius;
  }

  static PI: number = 3.14;
}

console.log(MathUtil.calculateArea(5)); // Output: 78.5

Output

78.5

Using Static Members

Static methods and properties can be accessed directly on the class without creating an instance of the class.

Example

This example demonstrates how to use static methods and properties in a class.

class Utility {
  static version: string = "1.0.0";

  static logVersion(): void {
    console.log(`Version: ${this.version}`);
  }
}

Utility.logVersion(); // Output: Version: 1.0.0
console.log(Utility.version); // Output: 1.0.0

Output

Version: 1.0.0
1.0.0

Complete Example with Output

In this section, we will combine the examples into a single TypeScript file, compile it to JavaScript, and run it to see the output.

TypeScript Code

You can test the following code in the TypeScript Playground:

// Static Properties
class MathUtil {
  static PI: number = 3.14;
}

console.log(MathUtil.PI); // Output: 3.14

// Static Methods
class MathUtil {
  static calculateArea(radius: number): number {
    return this.PI * radius * radius;
  }

  static PI: number = 3.14;
}

console.log(MathUtil.calculateArea(5)); // Output: 78.5

// Using Static Members
class Utility {
  static version: string = "1.0.0";

  static logVersion(): void {
    console.log(`Version: ${this.version}`);
  }
}

Utility.logVersion(); // Output: Version: 1.0.0
console.log(Utility.version); // Output: 1.0.0

Conclusion

In this chapter, we covered static methods and properties in TypeScript, including how to define and use them. We provided a complete example with its output to illustrate how these concepts work in TypeScript. Understanding static methods and properties is essential for writing utility functions and constants that do not require an instance of a class.