Part 3: Inheritance and Polymorphism - Code Reuse and Flexibility

Introduction

I built an e-commerce system with separate classes: PhysicalProduct, DigitalProduct, and SubscriptionProduct. Each had duplicate code for pricing, discounts, and inventory tracking. When I needed to add tax calculation, I updated PhysicalProduct but forgot the others. Production bugs followed.

I refactored using inheritance. Created a base Product class with shared logic. Extended it for specific product types. Tax calculation went in the base class once. All products inherited it automatically. That's when I understood inheritance's power.

This article shows you how to build class hierarchies, extend behavior, override methods, and leverage polymorphism for maintainable, flexible code.

The Problem: Code Duplication

class PhysicalProduct {
    constructor(
        public id: string,
        public name: string,
        public price: number,
        public weight: number
    ) {}
    
    calculatePrice(): number {
        return this.price;
    }
    
    applyDiscount(percent: number): void {
        this.price -= this.price * (percent / 100);
    }
    
    getShippingCost(): number {
        return this.weight * 0.5;
    }
}

class DigitalProduct {
    constructor(
        public id: string,
        public name: string,
        public price: number,
        public fileSize: number  // MB
    ) {}
    
    // Duplicate code!
    calculatePrice(): number {
        return this.price;
    }
    
    // Duplicate code!
    applyDiscount(percent: number): void {
        this.price -= this.price * (percent / 100);
    }
    
    getDownloadUrl(): string {
        return `https://downloads.example.com/${this.id}`;
    }
}

Problems:

• Duplicate calculatePrice() and applyDiscount() logic

• Bug fixes need updates in multiple places

• Adding features requires changing every class

• No unified way to handle different product types

The Solution: Inheritance

// Base class - shared behavior
class Product {
    constructor(
        public id: string,
        public name: string,
        protected price: number  // Protected: accessible in subclasses
    ) {}
    
    // Common methods
    calculatePrice(): number {
        return this.price;
    }
    
    applyDiscount(percent: number): void {
        if (percent < 0 || percent > 100) {
            throw new Error('Invalid discount');
        }
        this.price -= this.price * (percent / 100);
    }
    
    getDescription(): string {
        return `${this.name} - $${this.price}`;
    }
}

// Derived class - extends base class
class PhysicalProduct extends Product {
    constructor(
        id: string,
        name: string,
        price: number,
        public weight: number
    ) {
        super(id, name, price);  // Call parent constructor
    }
    
    // Additional method specific to physical products
    getShippingCost(): number {
        return this.weight * 0.5;
    }
    
    // Override parent method
    getDescription(): string {
        return `${super.getDescription()} (${this.weight}kg)`;
    }
}

class DigitalProduct extends Product {
    constructor(
        id: string,
        name: string,
        price: number,
        public fileSize: number
    ) {
        super(id, name, price);
    }
    
    getDownloadUrl(): string {
        return `https://downloads.example.com/${this.id}`;
    }
    
    getDescription(): string {
        return `${super.getDescription()} (${this.fileSize}MB download)`;
    }
}

// Usage
const laptop = new PhysicalProduct('PHYS-001', 'Laptop', 1200, 2.5);
const ebook = new DigitalProduct('DIG-001', 'TypeScript Guide', 29, 5);

// Inherited methods work on both
laptop.applyDiscount(10);  // From Product base class
ebook.applyDiscount(10);   // From Product base class

console.log(laptop.calculatePrice());  // 1080
console.log(ebook.calculatePrice());   // 26.1

// Type-specific methods
console.log(laptop.getShippingCost());     // 1.25
console.log(ebook.getDownloadUrl());       // "https://..."

// Overridden methods
console.log(laptop.getDescription());  // "Laptop - $1080 (2.5kg)"
console.log(ebook.getDescription());   // "TypeScript Guide - $26.1 (5MB download)"

Inheritance Basics

Extends Keyword

class Animal {
    constructor(protected name: string) {}
    
    makeSound(): void {
        console.log(`${this.name} makes a sound`);
    }
}

class Dog extends Animal {
    constructor(name: string, private breed: string) {
        super(name);  // Must call super() first!
    }
    
    // Dog has access to name (protected in parent)
    bark(): void {
        console.log(`${this.name} barks: Woof!`);
    }
}

const dog = new Dog('Buddy', 'Golden Retriever');
dog.makeSound();  // Inherited from Animal
dog.bark();       // Defined in Dog

Method Overriding

class Shape {
    constructor(protected color: string) {}
    
    getArea(): number {
        return 0;  // Default implementation
    }
    
    describe(): string {
        return `A ${this.color} shape with area ${this.getArea()}`;
    }
}

class Circle extends Shape {
    constructor(
        color: string,
        private radius: number
    ) {
        super(color);
    }
    
    // Override getArea()
    getArea(): number {
        return Math.PI * this.radius ** 2;
    }
}

class Rectangle extends Shape {
    constructor(
        color: string,
        private width: number,
        private height: number
    ) {
        super(color);
    }
    
    // Override getArea()
    getArea(): number {
        return this.width * this.height;
    }
}

const circle = new Circle('red', 5);
const rectangle = new Rectangle('blue', 10, 5);

console.log(circle.getArea());      // 78.54
console.log(rectangle.getArea());   // 50

// describe() uses overridden getArea()
console.log(circle.describe());     // "A red shape with area 78.54"
console.log(rectangle.describe());  // "A blue shape with area 50"

Using super

class Vehicle {
    constructor(protected brand: string) {}
    
    start(): void {
        console.log(`${this.brand} vehicle starting...`);
    }
    
    getInfo(): string {
        return `Brand: ${this.brand}`;
    }
}

class Car extends Vehicle {
    constructor(
        brand: string,
        private model: string
    ) {
        super(brand);
    }
    
    // Call parent method, then add more
    start(): void {
        super.start();  // Call parent's start()
        console.log('Engine started');
    }
    
    // Extend parent method
    getInfo(): string {
        return `${super.getInfo()}, Model: ${this.model}`;
    }
}

const car = new Car('Toyota', 'Camry');
car.start();
// Output:
// "Toyota vehicle starting..."
// "Engine started"

console.log(car.getInfo());  // "Brand: Toyota, Model: Camry"

Polymorphism

Different classes responding to same method call differently:

class Payment {
    constructor(protected amount: number) {}
    
    process(): void {
        console.log(`Processing payment of $${this.amount}`);
    }
}

class CreditCardPayment extends Payment {
    constructor(
        amount: number,
        private cardNumber: string
    ) {
        super(amount);
    }
    
    process(): void {
        console.log(`Processing credit card payment: ****${this.cardNumber.slice(-4)}`);
        console.log(`Amount: $${this.amount}`);
    }
}

class PayPalPayment extends Payment {
    constructor(
        amount: number,
        private email: string
    ) {
        super(amount);
    }
    
    process(): void {
        console.log(`Processing PayPal payment for ${this.email}`);
        console.log(`Amount: $${this.amount}`);
    }
}

class BankTransferPayment extends Payment {
    constructor(
        amount: number,
        private accountNumber: string
    ) {
        super(amount);
    }
    
    process(): void {
        console.log(`Processing bank transfer to account ${this.accountNumber}`);
        console.log(`Amount: $${this.amount}`);
    }
}

// Polymorphism in action
function processPayments(payments: Payment[]): void {
    for (const payment of payments) {
        payment.process();  // Different behavior for each type!
        console.log('---');
    }
}

const payments: Payment[] = [
    new CreditCardPayment(100, '4532123456789012'),
    new PayPalPayment(50, '[email protected]'),
    new BankTransferPayment(200, '123456789')
];

processPayments(payments);
// Each calls their own process() implementation!

Abstract Classes

Classes that cannot be instantiated directly - only extended:

abstract class DatabaseConnection {
    constructor(protected connectionString: string) {}
    
    // Abstract method - must be implemented by subclasses
    abstract connect(): Promise<void>;
    abstract disconnect(): Promise<void>;
    abstract query(sql: string): Promise<any>;
    
    // Concrete method - shared implementation
    async execute(sql: string): Promise<any> {
        await this.connect();
        try {
            return await this.query(sql);
        } finally {
            await this.disconnect();
        }
    }
}

class PostgresConnection extends DatabaseConnection {
    private client: any;
    
    async connect(): Promise<void> {
        console.log(`Connecting to PostgreSQL: ${this.connectionString}`);
        // this.client = new PostgresClient(this.connectionString);
        // await this.client.connect();
    }
    
    async disconnect(): Promise<void> {
        console.log('Disconnecting from PostgreSQL');
        // await this.client.end();
    }
    
    async query(sql: string): Promise<any> {
        console.log(`Executing PostgreSQL query: ${sql}`);
        // return await this.client.query(sql);
        return { rows: [] };
    }
}

class MySQLConnection extends DatabaseConnection {
    async connect(): Promise<void> {
        console.log(`Connecting to MySQL: ${this.connectionString}`);
    }
    
    async disconnect(): Promise<void> {
        console.log('Disconnecting from MySQL');
    }
    
    async query(sql: string): Promise<any> {
        console.log(`Executing MySQL query: ${sql}`);
        return [];
    }
}

// Cannot instantiate abstract class
// const db = new DatabaseConnection('connection-string');  // Error!

// Must use concrete subclass
const postgres = new PostgresConnection('postgresql://localhost/mydb');
const mysql = new MySQLConnection('mysql://localhost/mydb');

// Both implement the same interface
async function runQuery(db: DatabaseConnection, sql: string) {
    return await db.execute(sql);  // Works with any DatabaseConnection
}

Real Example: Notification System

abstract class Notification {
    constructor(
        protected recipient: string,
        protected subject: string,
        protected body: string,
        protected sentAt: Date | null = null
    ) {}
    
    // Abstract methods - each channel implements differently
    abstract send(): Promise<void>;
    abstract validateRecipient(): boolean;
    
    // Shared method
    async deliver(): Promise<boolean> {
        if (!this.validateRecipient()) {
            console.log(`Invalid recipient: ${this.recipient}`);
            return false;
        }
        
        try {
            await this.send();
            this.sentAt = new Date();
            console.log(`Notification sent at ${this.sentAt}`);
            return true;
        } catch (error) {
            console.error(`Failed to send notification: ${error}`);
            return false;
        }
    }
    
    getSummary(): string {
        return `To: ${this.recipient}, Subject: ${this.subject}`;
    }
}

class EmailNotification extends Notification {
    validateRecipient(): boolean {
        return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.recipient);
    }
    
    async send(): Promise<void> {
        console.log(`Sending email to ${this.recipient}`);
        console.log(`Subject: ${this.subject}`);
        console.log(`Body: ${this.body}`);
        
        // Simulate API call
        await new Promise(resolve => setTimeout(resolve, 100));
    }
    
    getSummary(): string {
        return `Email - ${super.getSummary()}`;
    }
}

class SMSNotification extends Notification {
    validateRecipient(): boolean {
        // Simple phone number validation
        return /^\+?[\d\s-]{10,}$/.test(this.recipient);
    }
    
    async send(): Promise<void> {
        console.log(`Sending SMS to ${this.recipient}`);
        console.log(`Message: ${this.body}`);
        
        // Simulate API call
        await new Promise(resolve => setTimeout(resolve, 100));
    }
    
    getSummary(): string {
        return `SMS - ${super.getSummary()}`;
    }
}

class PushNotification extends Notification {
    constructor(
        recipient: string,  // Device token
        subject: string,
        body: string,
        private badge: number = 0
    ) {
        super(recipient, subject, body);
    }
    
    validateRecipient(): boolean {
        // Validate device token format
        return this.recipient.length > 0;
    }
    
    async send(): Promise<void> {
        console.log(`Sending push notification to device ${this.recipient.slice(0, 10)}...`);
        console.log(`Title: ${this.subject}`);
        console.log(`Message: ${this.body}`);
        console.log(`Badge: ${this.badge}`);
        
        // Simulate API call
        await new Promise(resolve => setTimeout(resolve, 100));
    }
    
    getSummary(): string {
        return `Push - ${super.getSummary()} [Badge: ${this.badge}]`;
    }
}

// Notification service using polymorphism
class NotificationService {
    async sendBulk(notifications: Notification[]): Promise<void> {
        console.log(`Sending ${notifications.length} notifications...`);
        
        const results = await Promise.all(
            notifications.map(n => n.deliver())
        );
        
        const successful = results.filter(r => r).length;
        console.log(`Successfully sent ${successful}/${notifications.length} notifications`);
    }
    
    logSummaries(notifications: Notification[]): void {
        notifications.forEach(n => {
            console.log(n.getSummary());
        });
    }
}

// Usage
async function main() {
    const notifications: Notification[] = [
        new EmailNotification(
            '[email protected]',
            'Welcome!',
            'Thank you for signing up'
        ),
        new SMSNotification(
            '[phone]',
            'OTP Code',
            'Your verification code is: 123456'
        ),
        new PushNotification(
            'device-token-12345',
            'New Message',
            'You have a new message',
            1
        )
    ];
    
    const service = new NotificationService();
    
    // Log all summaries
    service.logSummaries(notifications);
    
    // Send all - polymorphic behavior
    await service.sendBulk(notifications);
}

Real Example: User Roles and Permissions

abstract class User {
    constructor(
        public id: string,
        public username: string,
        protected email: string
    ) {}
    
    // Abstract - each role has different permissions
    abstract canEdit(resourceId: string): boolean;
    abstract canDelete(resourceId: string): boolean;
    abstract canView(resourceId: string): boolean;
    
    // Shared methods
    getEmail(): string {
        return this.email;
    }
    
    getProfile() {
        return {
            id: this.id,
            username: this.username,
            role: this.getRole()
        };
    }
    
    abstract getRole(): string;
}

class AdminUser extends User {
    canEdit(resourceId: string): boolean {
        return true;  // Admin can edit everything
    }
    
    canDelete(resourceId: string): boolean {
        return true;  // Admin can delete everything
    }
    
    canView(resourceId: string): boolean {
        return true;  // Admin can view everything
    }
    
    getRole(): string {
        return 'admin';
    }
}

class EditorUser extends User {
    constructor(
        id: string,
        username: string,
        email: string,
        private managedResources: Set<string> = new Set()
    ) {
        super(id, username, email);
    }
    
    canEdit(resourceId: string): boolean {
        return this.managedResources.has(resourceId);
    }
    
    canDelete(resourceId: string): boolean {
        return false;  // Editors cannot delete
    }
    
    canView(resourceId: string): boolean {
        return true;  // Editors can view everything
    }
    
    addManagedResource(resourceId: string): void {
        this.managedResources.add(resourceId);
    }
    
    getRole(): string {
        return 'editor';
    }
}

class ViewerUser extends User {
    canEdit(resourceId: string): boolean {
        return false;
    }
    
    canDelete(resourceId: string): boolean {
        return false;
    }
    
    canView(resourceId: string): boolean {
        return true;  // Can only view
    }
    
    getRole(): string {
        return 'viewer';
    }
}

// Authorization service
class AuthorizationService {
    checkPermission(user: User, action: 'view' | 'edit' | 'delete', resourceId: string): boolean {
        switch (action) {
            case 'view':
                return user.canView(resourceId);
            case 'edit':
                return user.canEdit(resourceId);
            case 'delete':
                return user.canDelete(resourceId);
        }
    }
    
    logAccess(user: User, action: string, resourceId: string, allowed: boolean): void {
        const result = allowed ? 'ALLOWED' : 'DENIED';
        console.log(`[${result}] ${user.getRole()} '${user.username}' ${action} resource '${resourceId}'`);
    }
}

// Usage
const admin = new AdminUser('1', 'admin_user', '[email protected]');
const editor = new EditorUser('2', 'editor_user', '[email protected]');
editor.addManagedResource('article-123');

const viewer = new ViewerUser('3', 'viewer_user', '[email protected]');

const authService = new AuthorizationService();

const users: User[] = [admin, editor, viewer];
const resourceId = 'article-123';

users.forEach(user => {
    const canEdit = authService.checkPermission(user, 'edit', resourceId);
    authService.logAccess(user, 'edit', resourceId, canEdit);
    
    const canDelete = authService.checkPermission(user, 'delete', resourceId);
    authService.logAccess(user, 'delete', resourceId, canDelete);
});

// Output:
// [ALLOWED] admin 'admin_user' edit resource 'article-123'
// [ALLOWED] admin 'admin_user' delete resource 'article-123'
// [ALLOWED] editor 'editor_user' edit resource 'article-123'
// [DENIED] editor 'editor_user' delete resource 'article-123'
// [DENIED] viewer 'viewer_user' edit resource 'article-123'
// [DENIED] viewer 'viewer_user' delete resource 'article-123'

Protected vs Private

class BankAccount {
    private accountNumber: string;    // Only accessible in this class
    protected balance: number;         // Accessible in subclasses
    
    constructor(accountNumber: string, balance: number) {
        this.accountNumber = accountNumber;
        this.balance = balance;
    }
    
    getAccountNumber(): string {
        return this.accountNumber;
    }
}

class SavingsAccount extends BankAccount {
    constructor(
        accountNumber: string,
        balance: number,
        private interestRate: number
    ) {
        super(accountNumber, balance);
    }
    
    addInterest(): void {
        // Can access protected balance
        this.balance += this.balance * this.interestRate;
        
        // Error: Cannot access private accountNumber
        // console.log(this.accountNumber);
    }
    
    getBalance(): number {
        return this.balance;  // OK - protected
    }
}

Method Override Rules

class Base {
    // Public method
    public doSomething(): void {
        console.log('Base implementation');
    }
    
    // Protected method
    protected helper(): string {
        return 'helper';
    }
}

class Derived extends Base {
    // Can override public with public
    public doSomething(): void {
        console.log('Derived implementation');
    }
    
    // Can override protected with protected or public
    public helper(): string {
        return 'derived helper';
    }
    
    // Cannot override with more restrictive access
    // private doSomething(): void {}  // Error!
}

Best Practices

1. Favor Composition Over Deep Inheritance

// Avoid deep hierarchies
class Animal {}
class Mammal extends Animal {}
class Carnivore extends Mammal {}
class Cat extends Carnivore {}  // Too deep!

// Prefer composition
class Cat {
    constructor(
        private dietBehavior: DietBehavior,
        private movementBehavior: MovementBehavior
    ) {}
}

2. Use Abstract Classes for Shared Behavior

abstract class Repository<T> {
    abstract findById(id: string): Promise<T | null>;
    abstract save(entity: T): Promise<void>;
    abstract delete(id: string): Promise<void>;
    
    // Shared implementation
    async exists(id: string): Promise<boolean> {
        const entity = await this.findById(id);
        return entity !== null;
    }
}

3. Keep Inheritance Hierarchies Shallow

// Good - 1-2 levels
class BaseService {}
class UserService extends BaseService {}

// Avoid - too many levels
class A {}
class B extends A {}
class C extends B {}
class D extends C {}  // Hard to maintain!

4. Call super() First in Constructor

class Parent {
    constructor(protected value: number) {}
}

class Child extends Parent {
    constructor(value: number, private name: string) {
        super(value);  // Must be first!
        this.name = name;  // Now safe to use 'this'
    }
}

What's Next

You now understand:

• Class inheritance with extends

• Method overriding and super

• Abstract classes and methods

• Polymorphism for flexible code

• Protected vs private members

• Building class hierarchies

In Part 4: Interfaces and Composition, you'll learn how to use TypeScript interfaces for contracts, composition patterns for flexibility, and dependency injection for testable, maintainable code.

---

Based on building scalable TypeScript applications with clean inheritance hierarchies, from payment systems to notification services.