> ## Documentation Index
> Fetch the complete documentation index at: https://docs.syntblaze.com/llms.txt
> Use this file to discover all available pages before exploring further.
# TypeScript 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.
```typescript theme={"dark"}
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.
```typescript theme={"dark"}
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.
```typescript theme={"dark"}
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.
Tired of Poor TypeScript Skills? Fix That With Deep Grasping!
Learn More
