Alternative Approaches to Static Properties in TypeScript

• Static vs. Instance Properties:

  • Static properties belong to the class itself, shared by all instances. You can access them without creating an object.
  • Instance properties are specific to each object instance and require creating an object to access them.

• Interfaces and Instances:

Since interfaces deal with the structure of instances, they can't define static properties which are part of the class itself.

Here's what you can do instead:

1. Define static properties directly in the class using the static keyword.
2. Create a separate utility class to hold static properties if they are used across multiple classes.

class Circle {
  // Instance property (needs object creation)
  radius: number;

  // Static property (accessed directly on the class)
  static pi: number = 3.14;

  constructor(radius: number) {
    this.radius = radius;
  }

  // Example usage (static property)
  static calculateArea(radius: number): number {
    return Circle.pi * radius * radius;
  }
}

// Accessing static property without creating an object
let area = Circle.calculateArea(5);
console.log(area); // Output: 78.5

In this example:

• radius is an instance property specific to each Circle object.
• pi is a static property, a constant value accessible directly using the Circle class.
• The calculateArea method is also static, utilizing the pi property.

Separate Utility Class:

class MathUtils {
  // Static property
  static PI: number = 3.14;

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

class Circle {
  radius: number;

  constructor(radius: number) {
    this.radius = radius;
  }

  // Example usage
  get area() {
    return MathUtils.calculateArea(this.radius);
  }
}

let circle = new Circle(5);
console.log(circle.area); // Output: 78.5

Here:

• MathUtils is a separate class holding the static property PI.
• The Circle class uses the MathUtils.calculateArea method to calculate its area.

1. Using a namespace:

   Namespaces group related functionality without creating a class. You can define static properties within a namespace and access them using the namespace syntax.

   namespace MyMath {
     export const PI = 3.14;
   
     export function calculateArea(radius: number): number {
       return PI * radius * radius;
     }
   }
   
   class Circle {
     radius: number;
   
     constructor(radius: number) {
       this.radius = radius;
     }
   
     get area() {
       return MyMath.calculateArea(this.radius);
     }
   }
   
   let circle = new Circle(5);
   console.log(circle.area); // Output: 78.5
   

   Here, MyMath namespace holds the static PI property and the calculateArea function.

2. Using a static member interface:

   This approach involves creating a separate interface for static members and using it with the class that implements the main interface.

   interface StaticMath {
     PI: number;
     calculateArea(radius: number): number;
   }
   
   interface Shape {
     // Define instance properties here
   }
   
   class Circle implements Shape, StaticMath {
     radius: number;
     static PI = 3.14;
   
     constructor(radius: number) {
       this.radius = radius;
     }
   
     calculateArea() {
       return Circle.PI * this.radius * this.radius;
     }
   }
   
   let circle = new Circle(5);
   console.log(circle.calculateArea()); // Output: 78.5
   

   In this example, StaticMath defines the static members, and Circle implements both Shape and StaticMath. While it achieves a similar structure to an interface with static properties, it requires more code.