Understanding Classes in TypeScript

When you work with TypeScript, defining classes is a key part of object-oriented programming. A class serves as a template for creating objects, made up of properties and methods. Properties store data, while methods are functions that interact with these properties.

Consider this simple Person class example

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    greet() {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
}

This example demonstrates the core components of a TypeScript class:

• Properties (name and age) that store data
• A constructor method that initializes the object
• A method (greet) that defines object behavior

Classes help you create consistent objects and organize code logically, making your projects more maintainable as they grow.

Inheritance in TypeScript

Inheritance lets you build on existing classes by creating new ones that retain the parent's features while adding their own. In TypeScript, you use the extends keyword to create this parent-child relationship.

Here's an example with an Animal class and a Dog class that extends it:

class Animal {
    name: string;

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

    eat() {
        console.log(`${this.name} is eating.`);
    }
}

class Dog extends Animal {
    breed: string;

    constructor(name: string, breed: string) {
        super(name); // Call the parent constructor
        this.breed = breed;
    }

    bark() {
        console.log(`${this.name} the ${this.breed} says Woof!`);
    }
}
// Using the inherited class
const rex = new Dog("Rex", "German Shepherd");
rex.eat();  // Inherited method: "Rex is eating."
rex.bark(); // Own method: "Rex the German Shepherd says Woof!"

Notice how the Dog class:

• Inherits the name property and eat() method from Animal
• Adds its own breed property and bark() method
• Uses super() to call the parent's constructor

inheritance enables code reuse and helps build logical hierarchies in your application. It follows the "is-a" relationship - a dog is an animal, so it makes sense for Dog to extend Animal.

Managing State and Behavior

Classes in TypeScript manage data (state) through properties and actions (behavior) through methods. This encapsulation keeps related functionality together, making your code more organized.

Here's an example with a Counter class:

class Counter {
    private count: number;

    constructor() {
        this.count = 0;
    }

    increment() {
        this.count++;
    }

    decrement() {
        if (this.count > 0) {
          this.count--;
        }
  }

    reset() {
        this.count = 0;
    }

    getCount() {
        return this.count;
    }
}
// Using the Counter class
const counter = new Counter();
counter.increment();
counter.increment();
console.log(counter.getCount()); // Output: 2
counter.reset();
console.log(counter.getCount()); // Output: 0

This class demonstrates how to:

1. Store state with the count property
2. Control access with the private modifier
3. Define clear methods that modify or access the state
4. Create a self-contained unit of functionality

By structuring code this way, you maintain control over how state changes and reduce the risk of bugs from unexpected modifications.

Using Access Modifiers

Access modifiers control the visibility of class members. TypeScript supports private, protected, and public access. By default, members are public, but modifiers restrict access to ensure encapsulation and data integrity.

Consider a BankAccount class with a private balance property and public methods to deposit and withdraw:

class BankAccount {
  private balance: number;        // Only accessible within this class
  protected accountNumber: string; // Accessible within this class and subclasses
  public owner: string;           // Accessible anywhere

  constructor(owner: string, accountNumber: string, initialBalance: number) {
    this.owner = owner;
    this.accountNumber = accountNumber;
    this.balance = initialBalance;
  }

  public deposit(amount: number) {
    if (amount > 0) {
      this.balance += amount;
      return true;
    }
    return false;
  }

  public withdraw(amount: number) {
    if (amount > 0 && this.balance >= amount) {
      this.balance -= amount;
      return true;
    }
    return false;
  }

  public getBalance() {
    return this.balance;
  }
}

// Using the BankAccount class
const account = new BankAccount("John Doe", "12345", 1000);
account.deposit(500);
console.log(account.getBalance()); // 1500
console.log(account.owner);        // "John Doe" - public is accessible
// console.log(account.balance);   // Error - private member is not accessible

In this example:

• private properties like balance can only be accessed within the class itself
• protected properties like accountNumber can be accessed within the class and any classes that inherit from it
• public properties like owner and methods like deposit() can be accessed from anywhere

When no access modifier is specified, the default is public. Using these modifiers properly is crucial for building robust applications with TypeScript best practices.

Static Methods and Properties

Static members belong to the class itself, not its instances. They are useful for utility functions or shared data that doesn't depend on an instance's state.

Here's a MathUtils class with static methods:

class MathUtils {
  // Static property - shared across all instances
  static readonly PI = 3.14159265359;
  
  // Static methods
  static add(a: number, b: number) {
    return a + b;
  }
  
  static multiply(a: number, b: number) {
    return a * b;
  }
  
  static square(x: number) {
    return x * x;
  }
  
  static calculateCircleArea(radius: number) {
    return MathUtils.PI * MathUtils.square(radius);
  }
}

// Using static members without creating an instance
console.log(MathUtils.PI);                     // 3.14159265359
console.log(MathUtils.add(5, 3));              // 8
console.log(MathUtils.calculateCircleArea(2)); // 12.56637...

Key points about static members:

• Access them directly through the class name: MathUtils.add()
• They can't access instance properties or methods using this
• They can access other static members using the class name
• Use static readonly for constants that shouldn't change

Static members are perfect for functionality that conceptually belongs to the class but doesn't depend on instance state, like factory methods or utility functions. This pattern can be useful when working with TypeScript in frameworks like Convex where utility functions help manage data operations.

Implementing Interfaces

Interfaces define a contract that classes must follow. They list properties and methods that the class must have. Interfaces ensure consistency and allow for polymorphic use.

For example, a Printable interface and a Document class that implements it:

// Define an interface
interface Printable {
  content: string;
  print(): void;
  getFormattedContent(): string;
}

// Implement the interface in a class
class Document implements Printable {
  content: string;
  private author: string;

  constructor(content: string, author: string) {
    this.content = content;
    this.author = author;
  }

  print() {
    console.log(this.getFormattedContent());
  }

  getFormattedContent(): string {
    return `Document by ${this.author}:\n${this.content}`;
  }

  // Class can have additional methods not in the interface
  getAuthor(): string {
    return this.author;
  }
}

// Another class implementing the same interface
class Receipt implements Printable {
  content: string;
  private total: number;

  constructor(content: string, total: number) {
    this.content = content;
    this.total = total;
  }

  print() {
    console.log(this.getFormattedContent());
  }

  getFormattedContent(): string {
    return `RECEIPT\n${this.content}\nTotal: $${this.total.toFixed(2)}`;
  }
}

// Function that works with any Printable object
function printDocument(doc: Printable) {
  doc.print();
}

// Using different implementations polymorphically
const myDoc = new Document("TypeScript interfaces are useful", "Developer");
const myReceipt = new Receipt("Coffee: $3.99", 3.99);

printDocument(myDoc);     // Works with Document
printDocument(myReceipt); // Works with Receipt too

The interface pattern enables you to work with objects based on their capabilities rather than their specific types. This approach is similar to argument validation techniques in Convex, where schema enforcement ensures data consistency across your application.

Interfaces are particularly valuable when:

• Multiple classes need to follow the same contract
• You want to ensure an object has certain capabilities
• Creating pluggable components that can be swapped out

You can also use interfaces to define functional relationships between components, which helps make your TypeScript code more modular and maintainable.

Using Decorators

Decorators add behavior to a class, method, or property without changing its original code. They are functions that take the target as an argument and return a new version that "wraps" the original.

Here's an example of decorators in action:

function Logger(target: any, propertyKey: string, descriptor: // Decorator factory - returns a decorator function
function LogMethod(prefix: string) {
  // The actual decorator
  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    // Store the original method
    const originalMethod = descriptor.value;
    
    // Replace with a new function that wraps the original
    descriptor.value = function(...args: any[]) {
      console.log(`${prefix} Calling ${propertyKey} with:`, args);
      
      // Call the original method and store result
      const result = originalMethod.apply(this, args);
      
      console.log(`${prefix} Result:`, result);
      return result;
    };
    
    return descriptor;
  };
}

// Class property decorator
function Required(target: any, propertyKey: string) {
  let value: any;
  
  const getter = function() {
    return value;
  };
  
  const setter = function(newVal: any) {
    if (newVal === undefined || newVal === null) {
      throw new Error(`${propertyKey} is required`);
    }
    value = newVal;
  };
  
  Object.defineProperty(target, propertyKey, {
    get: getter,
    set: setter,
    enumerable: true,
    configurable: true
  });
}

class Calculator {
  @Required
  name: string;
  
  constructor(name: string) {
    this.name = name;
  }
  
  @LogMethod("CALC")
  add(a: number, b: number) {
    return a + b;
  }
  
  @LogMethod("CALC")
  multiply(a: number, b: number) {
    return a * b;
  }
}

// Using the decorated class
const calc = new Calculator("MyCalculator");
calc.add(5, 3);      // Logs method call and result
calc.multiply(2, 4); // Logs method call and result

// This would throw an error because of @Required
// const badCalc = new Calculator(null);

Decorators provide a clean way to implement cross-cutting concerns without cluttering your business logic. They're similar to custom functions in Convex, which allow you to customize behavior in a reusable way.

Since TypeScript 5.0 (released in early 2023), decorators are now a standard feature and no longer considered experimental. However, if you're working with an older version of TypeScript, you might still need to enable them in your tsconfig.json.

Common Challenges and Solutions

Working with TypeScript classes often presents specific challenges, especially for developers transitioning from JavaScript. Here are some solutions to common issues:

Property Initialization

One frequent challenge is properly initializing class properties:

Using this in Constructor Parameters

You can simplify property assignments with parameter properties:

// Verbose approach
class Person {
  name: string;
  age: number;
  
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

// More concise with parameter properties
class Person {
  constructor(
    public name: string,
    public age: number,
    private ssn: string
  ) {
    // No need to assign this.name = name, etc.
  }
}

Method Overriding Issues

When extending classes, proper method overriding requires careful typing:

class Base {
  calculate(value: number): number {
    return value * 2;
  }
}

class Derived extends Base {
  // Error: Parameter types don't match base class
  // calculate(value: string): number { ... }
  
  // Correct: Same parameter types as base method
  calculate(value: number): number {
    // Call the parent method with super
    const baseResult = super.calculate(value);
    return baseResult + 10;
  }
}

These techniques align with the TypeScript best practices recommended by Convex and help you avoid common pitfalls when working with classes.

Final Thoughts on TypeScript Classes

TypeScript classes provide a clean, structured way to organize your code using object-oriented principles. They combine the flexibility of JavaScript with the safety of static typing.

By mastering classes, you can create better organized, more maintainable applications. Whether you're building a small project or a complex application with Convex, TypeScript classes help you write safer, more reusable code.