Extending classes with types in Typescript - Deep Dive

Overview - Extending classes with types

What is it?

Extending classes with types in TypeScript means creating a new class that builds on an existing class, adding or changing features while keeping the original structure. This uses the 'extends' keyword to inherit properties and methods from a base class. It helps organize code by reusing common parts and customizing specific behaviors. TypeScript adds type safety to this process, ensuring the new class follows expected shapes and rules.

Why it matters

Without extending classes, programmers would repeat the same code many times, making programs longer and harder to fix. Extending classes lets us write less code and keep it organized, which saves time and reduces mistakes. TypeScript's type system makes sure that when we extend classes, we don't accidentally break the rules, helping catch errors early. This leads to more reliable and maintainable software.

Where it fits

Before learning this, you should understand basic TypeScript classes and types. After this, you can explore advanced topics like interfaces, abstract classes, and generics. Extending classes is a key step toward mastering object-oriented programming in TypeScript.

Mental Model

Core Idea

Extending classes with types means creating a new class that inherits properties and methods from an existing class while adding or modifying features, all checked by TypeScript's type system.

Think of it like...

It's like inheriting a family recipe book from your parents and adding your own new recipes or changing some ingredients, while keeping the original recipes intact and organized.

BaseClass
  │
  ├─ properties and methods
  │
  ▼
ExtendedClass (inherits BaseClass)
  ├─ all BaseClass properties and methods
  ├─ new or overridden properties and methods
  └─ type checks ensure correctness

Build-Up - 7 Steps

1

Foundation

Basic class creation in TypeScript

Concept: Learn how to define a simple class with properties and methods in TypeScript.

class Animal { name: string; constructor(name: string) { this.name = name; } speak() { return `${this.name} makes a sound.`; } } const animal = new Animal('Dog'); console.log(animal.speak());

Result

Dog makes a sound.

Understanding how to create classes and use properties and methods is the foundation for extending classes later.

2

Foundation

Type annotations in classes

Concept: Introduce TypeScript's type annotations for class properties and method parameters.

class Person { age: number; constructor(age: number) { this.age = age; } greet(message: string): string { return `Age ${this.age}: ${message}`; } } const p = new Person(30); console.log(p.greet('Hello'));

Result

Age 30: Hello

Adding types to class members helps catch errors early and makes code easier to understand.

3

Intermediate

Extending a class with 'extends'

🤔Before reading on: do you think the extended class can access private properties of the base class? Commit to your answer.

Concept: Learn how to create a new class that inherits from an existing class using the 'extends' keyword.

class Vehicle { wheels: number; constructor(wheels: number) { this.wheels = wheels; } drive() { return `Driving on ${this.wheels} wheels.`; } } class Car extends Vehicle { brand: string; constructor(brand: string) { super(4); // call base constructor this.brand = brand; } drive() { return `${this.brand} car is ${super.drive()}`; } } const myCar = new Car('Toyota'); console.log(myCar.drive());

Result

Toyota car is Driving on 4 wheels.

Knowing how to use 'extends' and 'super' lets you reuse and customize existing class behavior safely.

4

Intermediate

Type safety in extended classes

🤔Before reading on: do you think TypeScript allows assigning a wrong type to an inherited property? Commit to your answer.

Concept: Understand how TypeScript enforces types when extending classes to prevent errors.

class Shape { color: string; constructor(color: string) { this.color = color; } } class Circle extends Shape { radius: number; constructor(color: string, radius: number) { super(color); this.radius = radius; } } const c = new Circle('red', 10); c.color = 'blue'; // OK // c.radius = 'large'; // Error: Type 'string' is not assignable to type 'number'

Result

TypeScript error if wrong type assigned to radius property.

TypeScript's type checking prevents common bugs by enforcing correct types even in inherited properties.

5

Intermediate

Overriding methods with types

🤔Before reading on: can an overriding method have a different return type than the base method? Commit to your answer.

Concept: Learn how to override methods in a subclass while respecting type compatibility.

class Printer { print(): string { return 'Printing document'; } } class ColorPrinter extends Printer { print(): string { return 'Printing in color'; } } const printer: Printer = new ColorPrinter(); console.log(printer.print());

Result

Printing in color

Overriding methods must keep compatible types to ensure consistent behavior and type safety.

6

Advanced

Using generics with extended classes

🤔Before reading on: do you think generics can help make extended classes more flexible? Commit to your answer.

Concept: Explore how generics allow extended classes to work with different types safely and flexibly.

class Box { content: T; constructor(content: T) { this.content = content; } getContent(): T { return this.content; } } class ColoredBox extends Box { color: string; constructor(content: T, color: string) { super(content); this.color = color; } } const box = new ColoredBox(123, 'red'); console.log(box.getContent(), box.color);

Result

123 red

Generics combined with class extension enable reusable and type-safe components for many data types.

7

Expert

Type compatibility and structural typing in extensions

🤔Before reading on: do you think TypeScript checks class compatibility by name or by structure? Commit to your answer.

Concept: Understand how TypeScript uses structural typing to allow flexible compatibility between classes and interfaces when extending.

class Point { x: number; y: number; } class Location { x: number; y: number; name: string; } const p: Point = { x: 1, y: 2 }; const l: Location = { x: 1, y: 2, name: 'Home' }; // Point type is compatible with Location because it has matching structure const pointFromLocation: Point = l; // Extending classes also respects this structural typing class ColoredPoint extends Point { color: string; } const cp: ColoredPoint = { x: 0, y: 0, color: 'blue' };

Result

TypeScript allows assignment based on matching properties, not class names.

Knowing TypeScript's structural typing clarifies why some assignments work even without explicit inheritance.

Under the Hood

When a class extends another, TypeScript creates a prototype chain linking the new class to the base class. This means instances of the extended class inherit properties and methods from the base class's prototype. TypeScript's compiler checks that the extended class respects the types declared in the base class and its own members. At runtime, JavaScript handles inheritance via prototypes, while TypeScript ensures type correctness during development.

Why designed this way?

TypeScript builds on JavaScript's prototype-based inheritance but adds static type checking to catch errors early. Using 'extends' matches JavaScript's class syntax introduced in ES6, making it familiar and compatible. Structural typing was chosen over nominal typing to allow flexible and safe code reuse without strict class name matching, which fits JavaScript's dynamic nature.

ExtendedClass.prototype ──► BaseClass.prototype
       │                      │
       ▼                      ▼
  instance methods          base methods

TypeScript compiler checks types during compilation
JavaScript uses prototype chain at runtime

Myth Busters - 4 Common Misconceptions

Quick: Does extending a class copy its properties to the new class? Commit to yes or no.

Common Belief: Extending a class copies all properties and methods into the new class as separate copies.

Reality: Extending creates a prototype link; properties and methods are shared via the prototype chain, not copied.

Why it matters: Thinking properties are copied can lead to confusion about memory use and unexpected behavior when modifying shared methods.

Quick: Can an extended class access private members of its base class? Commit to yes or no.

Common Belief: An extended class can access all properties and methods of its base class, including private ones.

Reality: Private members are only accessible within the class that declares them, not in subclasses.

Why it matters: Assuming access to private members can cause errors and break encapsulation, leading to fragile code.

Quick: Does TypeScript enforce types at runtime? Commit to yes or no.

Common Belief: TypeScript's type checks prevent all type errors during program execution.

Reality: TypeScript checks types only at compile time; at runtime, JavaScript runs without type enforcement.

Why it matters: Relying on TypeScript for runtime safety can cause bugs if runtime values don't match expected types.

Quick: Is method overriding allowed to change the method's return type arbitrarily? Commit to yes or no.

Common Belief: Overriding methods can freely change return types to anything desired.

Reality: Overriding methods must have return types compatible with the base method to maintain type safety.

Why it matters: Changing return types breaks polymorphism and can cause runtime errors or type conflicts.

Expert Zone

1

TypeScript's structural typing means classes with matching properties are compatible even without explicit inheritance, enabling flexible design patterns.

2

Using 'protected' members allows subclasses to access properties while keeping them hidden from outside code, balancing encapsulation and extensibility.

3

When extending generic classes, specifying type parameters carefully avoids subtle bugs and improves code reuse across different data types.

When NOT to use

Avoid extending classes when composition or interfaces better express relationships, especially to prevent deep inheritance chains that complicate maintenance. Prefer composition for flexible behavior reuse and interfaces for defining contracts without implementation.

Production Patterns

In real-world TypeScript projects, extending classes is often combined with interfaces and generics to build reusable UI components, data models, and service layers. Frameworks like Angular use class inheritance with decorators and dependency injection, leveraging TypeScript's type system for robust applications.

Connections

Interfaces in TypeScript

Builds-on

Understanding class extension helps grasp how interfaces define contracts that classes can implement or extend, enabling flexible and type-safe designs.

Object-oriented programming (OOP)

Same pattern

Extending classes in TypeScript follows core OOP principles like inheritance and polymorphism, connecting TypeScript to broader programming concepts.

Biological inheritance

Analogy in a different field

Just like living organisms inherit traits from parents with variations, classes inherit properties and methods, helping understand the concept beyond programming.

Common Pitfalls

#1 Trying to access private members of the base class in the subclass.

Wrong approach:

class Base {
private secret: string = 'hidden';
}

class Derived extends Base {
reveal() {
return this.secret; // Error: Property 'secret' is private
}
}

Correct approach:

class Base {
protected secret: string = 'hidden';
}

class Derived extends Base {
reveal() {
return this.secret; // OK: protected allows subclass access
}
}

Root cause:

Misunderstanding the difference between private and protected access modifiers.

#2 Overriding a method with an incompatible return type.

Wrong approach:

class Animal {
speak(): string {
return 'sound';
}
}

class Dog extends Animal {
speak(): number {
return 123; // Error: return type not compatible
}
}

Correct approach:

class Dog extends Animal {
speak(): string {
return 'bark'; // Correct: same return type
}
}

Root cause:

Ignoring TypeScript's type compatibility rules for method overriding.

#3 Forgetting to call 'super()' in subclass constructor.

Wrong approach:

class Parent {
constructor(public name: string) {}
}

class Child extends Parent {
constructor(name: string) {
this.name = name; // Error: 'super' must be called before accessing 'this'
}
}

Correct approach:

class Child extends Parent {
constructor(name: string) {
super(name); // Correct: call base constructor first
}
}

Root cause:

Not understanding JavaScript's requirement to call 'super()' before using 'this' in subclass constructors.

Key Takeaways

Extending classes in TypeScript allows you to build new classes based on existing ones, reusing code and adding new features.

TypeScript enforces type safety in extended classes, preventing many common programming errors before running the code.

Understanding access modifiers like private and protected is crucial to controlling what subclasses can access.

Method overriding must respect type compatibility to maintain consistent and safe behavior across class hierarchies.

TypeScript's structural typing system enables flexible compatibility beyond explicit inheritance, making the language powerful and expressive.