Derived Class

A derived class (or subclass) in TypeScript is a class that inherits the properties, methods, and type definitions of another class, known as the base class (or superclass), using the extends keyword. It establishes a prototype chain inheritance, allowing the derived class to augment or mutate the inherited members while adhering to TypeScript’s static typing rules.

Syntax and super()

When a derived class declares its own constructor, it must invoke the base class constructor using the super() method. TypeScript strictly enforces that super() is called before any reference to this is made within the derived constructor.

class BaseClass {
  baseProperty: string;

  constructor(value: string) {
    this.baseProperty = value;
  }
}

class DerivedClass extends BaseClass {
  derivedProperty: number;

  constructor(baseValue: string, derivedValue: number) {
    super(baseValue); // Mandatory call to base constructor
    this.derivedProperty = derivedValue; // 'this' is now accessible
  }
}

Method Overriding and the override Keyword

A derived class can redefine a method from its base class. TypeScript provides the override modifier to explicitly declare this intent. When override is used, the TypeScript compiler verifies that a method with a compatible signature exists in the base class, preventing errors caused by typos or base class refactoring.

class BaseClass {
  executeAction(): void {
    // Base implementation
  }
}

class DerivedClass extends BaseClass {
  override executeAction(): void {
    super.executeAction(); // Optional: invoke base implementation
    // Derived implementation
  }
}

Access Modifiers in Inheritance

TypeScript’s access modifiers dictate member visibility within the inheritance hierarchy:

• public (default): Members are accessible on instances of both the base and derived classes.
• protected: Members are accessible within the base class and any derived classes, but cannot be accessed on instantiated objects from the outside.
• private: Members are strictly confined to the base class. A derived class inherits the member in the compiled JavaScript, but the TypeScript compiler forbids accessing or overriding it within the derived class.

class BaseClass {
  public publicMember = 1;
  protected protectedMember = 2;
  private privateMember = 3;
}

class DerivedClass extends BaseClass {
  accessMembers() {
    this.publicMember;    // Allowed
    this.protectedMember; // Allowed
    // this.privateMember; // Compiler Error: Property is private
  }
}

Initialization Order

Understanding the exact sequence of class initialization is critical when working with derived classes to avoid accessing uninitialized properties. TypeScript follows this strict execution order during instantiation:

1. The base class fields are initialized.
2. The base class constructor executes.
3. The derived class fields are initialized.
4. The derived class constructor executes.

Because base class constructors run before derived class fields are initialized, calling overridden methods within a base constructor will execute the derived method before the derived class’s properties have been instantiated, which can lead to undefined values.

Master TypeScript with Deep Grasping Methodology!

Learn More