Part 4: Interfaces and Composition - Contracts and Flexibility

Introduction

I built a payment processing system with inheritance. Created Payment base class, extended it to CreditCardPayment, PayPalPayment, StripePayment. When adding support for multiple payment providers (PayPal AND Stripe), the inheritance tree broke. A payment couldn't be both PayPal and Stripe.

I refactored using interfaces and composition. Defined PaymentProcessor interface. Created separate processor classes. Payment class composed these processors instead of inheriting. Added new providers by composing new processors. No inheritance conflicts. That's when I learned "composition over inheritance."

This article teaches you TypeScript interfaces, composition patterns, dependency injection, and building flexible, testable systems.

The Problem: Rigid Inheritance

// Inheritance-based approach - inflexible
class Logger {
    log(message: string): void {
        console.log(message);
    }
}

class Service extends Logger {
    execute(): void {
        this.log('Executing service');
    }
}

// Problem 1: Can only extend one class
// class Service extends Logger, Database {}  // Error!

// Problem 2: Tightly coupled to implementation
// What if we want to log to a file instead of console?

// Problem 3: Cannot test in isolation
// Service always logs to console during tests

The Solution: Interfaces and Composition

// Interface - defines contract
interface Logger {
    log(message: string): void;
}

// Implementation - console logger
class ConsoleLogger implements Logger {
    log(message: string): void {
        console.log(`[CONSOLE] ${message}`);
    }
}

// Implementation - file logger
class FileLogger implements Logger {
    constructor(private filePath: string) {}
    
    log(message: string): void {
        // Write to file
        console.log(`[FILE:${this.filePath}] ${message}`);
    }
}

// Composition - inject dependency
class Service {
    constructor(private logger: Logger) {}  // Depends on interface, not implementation!
    
    execute(): void {
        this.logger.log('Executing service');
    }
}

// Flexible - swap implementations
const consoleService = new Service(new ConsoleLogger());
consoleService.execute();  // Logs to console

const fileService = new Service(new FileLogger('/var/log/app.log'));
fileService.execute();  // Logs to file

// Testable - use mock logger
class MockLogger implements Logger {
    messages: string[] = [];
    
    log(message: string): void {
        this.messages.push(message);
    }
}

const mockLogger = new MockLogger();
const testService = new Service(mockLogger);
testService.execute();
console.log(mockLogger.messages);  // ['Executing service']

TypeScript Interfaces

Basic Interface

interface User {
    id: string;
    username: string;
    email: string;
}

function printUser(user: User): void {
    console.log(`${user.username} (${user.email})`);
}

const user: User = {
    id: '1',
    username: 'alice',
    email: '[email protected]'
};

printUser(user);

Optional Properties

interface Product {
    id: string;
    name: string;
    price: number;
    description?: string;  // Optional
    tags?: string[];       // Optional
}

const product: Product = {
    id: 'PROD-001',
    name: 'Laptop',
    price: 1200
    // description and tags omitted
};

Readonly Properties

interface Config {
    readonly apiKey: string;
    readonly endpoint: string;
    timeout: number;  // Can be modified
}

const config: Config = {
    apiKey: 'secret-key',
    endpoint: 'https://api.example.com',
    timeout: 5000
};

config.timeout = 10000;  // OK
// config.apiKey = 'new-key';  // Error: readonly

Method Signatures

interface Calculator {
    add(a: number, b: number): number;
    subtract(a: number, b: number): number;
    multiply(a: number, b: number): number;
    divide(a: number, b: number): number;
}

class BasicCalculator implements Calculator {
    add(a: number, b: number): number {
        return a + b;
    }
    
    subtract(a: number, b: number): number {
        return a - b;
    }
    
    multiply(a: number, b: number): number {
        return a * b;
    }
    
    divide(a: number, b: number): number {
        if (b === 0) throw new Error('Division by zero');
        return a / b;
    }
}

Interface Inheritance

interface Entity {
    id: string;
    createdAt: Date;
}

interface Auditable extends Entity {
    updatedAt: Date;
    updatedBy: string;
}

interface User extends Auditable {
    username: string;
    email: string;
}

const user: User = {
    id: '1',
    createdAt: new Date(),
    updatedAt: new Date(),
    updatedBy: 'admin',
    username: 'alice',
    email: '[email protected]'
};

Composition Patterns

Strategy Pattern

Different algorithms, same interface:

interface PricingStrategy {
    calculatePrice(basePrice: number): number;
}

class RegularPricing implements PricingStrategy {
    calculatePrice(basePrice: number): number {
        return basePrice;
    }
}

class DiscountPricing implements PricingStrategy {
    constructor(private discountPercent: number) {}
    
    calculatePrice(basePrice: number): number {
        return basePrice * (1 - this.discountPercent / 100);
    }
}

class MemberPricing implements PricingStrategy {
    calculatePrice(basePrice: number): number {
        // 20% member discount + free shipping
        return basePrice * 0.8;
    }
}

class Product {
    constructor(
        private name: string,
        private basePrice: number,
        private pricingStrategy: PricingStrategy
    ) {}
    
    getPrice(): number {
        return this.pricingStrategy.calculatePrice(this.basePrice);
    }
    
    setPricingStrategy(strategy: PricingStrategy): void {
        this.pricingStrategy = strategy;
    }
}

// Usage
const product = new Product('Laptop', 1000, new RegularPricing());
console.log(product.getPrice());  // 1000

// Change strategy at runtime
product.setPricingStrategy(new DiscountPricing(15));
console.log(product.getPrice());  // 850

product.setPricingStrategy(new MemberPricing());
console.log(product.getPrice());  // 800

Dependency Injection

interface Database {
    query(sql: string): Promise<any>;
}

interface Cache {
    get(key: string): Promise<any>;
    set(key: string, value: any, ttl: number): Promise<void>;
}

interface EmailService {
    send(to: string, subject: string, body: string): Promise<void>;
}

class UserService {
    constructor(
        private db: Database,
        private cache: Cache,
        private emailService: EmailService
    ) {}
    
    async getUserById(id: string): Promise<any> {
        // Try cache first
        const cached = await this.cache.get(`user:${id}`);
        if (cached) return cached;
        
        // Query database
        const user = await this.db.query(`SELECT * FROM users WHERE id = '${id}'`);
        
        // Cache result
        await this.cache.set(`user:${id}`, user, 3600);
        
        return user;
    }
    
    async createUser(username: string, email: string): Promise<void> {
        await this.db.query(`INSERT INTO users (username, email) VALUES ('${username}', '${email}')`);
        await this.emailService.send(email, 'Welcome!', 'Thanks for signing up');
    }
}

// Production implementations
class PostgresDatabase implements Database {
    async query(sql: string): Promise<any> {
        console.log(`Executing: ${sql}`);
        return { id: '1', username: 'alice' };
    }
}

class RedisCache implements Cache {
    async get(key: string): Promise<any> {
        console.log(`Cache get: ${key}`);
        return null;
    }
    
    async set(key: string, value: any, ttl: number): Promise<void> {
        console.log(`Cache set: ${key} (TTL: ${ttl})`);
    }
}

class SendGridEmailService implements EmailService {
    async send(to: string, subject: string, body: string): Promise<void> {
        console.log(`Sending email to ${to}: ${subject}`);
    }
}

// Production setup
const userService = new UserService(
    new PostgresDatabase(),
    new RedisCache(),
    new SendGridEmailService()
);

// Test setup - inject mocks
class MockDatabase implements Database {
    async query(sql: string): Promise<any> {
        return { id: '1', username: 'test' };
    }
}

class MockCache implements Cache {
    private store = new Map<string, any>();
    
    async get(key: string): Promise<any> {
        return this.store.get(key);
    }
    
    async set(key: string, value: any): Promise<void> {
        this.store.set(key, value);
    }
}

class MockEmailService implements EmailService {
    sentEmails: Array<{to: string, subject: string, body: string}> = [];
    
    async send(to: string, subject: string, body: string): Promise<void> {
        this.sentEmails.push({ to, subject, body });
    }
}

const testUserService = new UserService(
    new MockDatabase(),
    new MockCache(),
    new MockEmailService()
);

Real Example: Storage Abstraction

I built a file storage system that needed to work with local files, AWS S3, and Azure Blob Storage:

interface FileMetadata {
    name: string;
    size: number;
    contentType: string;
    lastModified: Date;
}

interface StorageProvider {
    upload(path: string, content: Buffer): Promise<void>;
    download(path: string): Promise<Buffer>;
    delete(path: string): Promise<void>;
    exists(path: string): Promise<boolean>;
    getMetadata(path: string): Promise<FileMetadata>;
    listFiles(prefix: string): Promise<string[]>;
}

class LocalStorageProvider implements StorageProvider {
    constructor(private basePath: string) {}
    
    async upload(path: string, content: Buffer): Promise<void> {
        console.log(`Uploading to local: ${this.basePath}/${path}`);
        // fs.writeFileSync(`${this.basePath}/${path}`, content);
    }
    
    async download(path: string): Promise<Buffer> {
        console.log(`Downloading from local: ${this.basePath}/${path}`);
        // return fs.readFileSync(`${this.basePath}/${path}`);
        return Buffer.from('content');
    }
    
    async delete(path: string): Promise<void> {
        console.log(`Deleting from local: ${this.basePath}/${path}`);
        // fs.unlinkSync(`${this.basePath}/${path}`);
    }
    
    async exists(path: string): Promise<boolean> {
        console.log(`Checking existence in local: ${this.basePath}/${path}`);
        // return fs.existsSync(`${this.basePath}/${path}`);
        return true;
    }
    
    async getMetadata(path: string): Promise<FileMetadata> {
        console.log(`Getting metadata from local: ${this.basePath}/${path}`);
        return {
            name: path,
            size: 1024,
            contentType: 'application/octet-stream',
            lastModified: new Date()
        };
    }
    
    async listFiles(prefix: string): Promise<string[]> {
        console.log(`Listing files in local: ${this.basePath}/${prefix}`);
        return ['file1.txt', 'file2.txt'];
    }
}

class S3StorageProvider implements StorageProvider {
    constructor(
        private bucket: string,
        private region: string
    ) {}
    
    async upload(path: string, content: Buffer): Promise<void> {
        console.log(`Uploading to S3: ${this.bucket}/${path}`);
        // await s3Client.putObject({ Bucket: this.bucket, Key: path, Body: content });
    }
    
    async download(path: string): Promise<Buffer> {
        console.log(`Downloading from S3: ${this.bucket}/${path}`);
        // const response = await s3Client.getObject({ Bucket: this.bucket, Key: path });
        // return response.Body as Buffer;
        return Buffer.from('content');
    }
    
    async delete(path: string): Promise<void> {
        console.log(`Deleting from S3: ${this.bucket}/${path}`);
        // await s3Client.deleteObject({ Bucket: this.bucket, Key: path });
    }
    
    async exists(path: string): Promise<boolean> {
        console.log(`Checking existence in S3: ${this.bucket}/${path}`);
        // try {
        //     await s3Client.headObject({ Bucket: this.bucket, Key: path });
        //     return true;
        // } catch {
        //     return false;
        // }
        return true;
    }
    
    async getMetadata(path: string): Promise<FileMetadata> {
        console.log(`Getting metadata from S3: ${this.bucket}/${path}`);
        return {
            name: path,
            size: 2048,
            contentType: 'application/octet-stream',
            lastModified: new Date()
        };
    }
    
    async listFiles(prefix: string): Promise<string[]> {
        console.log(`Listing files in S3: ${this.bucket}/${prefix}`);
        // const response = await s3Client.listObjectsV2({ Bucket: this.bucket, Prefix: prefix });
        // return response.Contents?.map(obj => obj.Key!) || [];
        return ['s3-file1.txt', 's3-file2.txt'];
    }
}

class FileManager {
    constructor(private storage: StorageProvider) {}
    
    async uploadFile(path: string, content: Buffer): Promise<void> {
        if (await this.storage.exists(path)) {
            throw new Error(`File already exists: ${path}`);
        }
        await this.storage.upload(path, content);
    }
    
    async downloadFile(path: string): Promise<Buffer> {
        if (!await this.storage.exists(path)) {
            throw new Error(`File not found: ${path}`);
        }
        return await this.storage.download(path);
    }
    
    async deleteFile(path: string): Promise<void> {
        if (!await this.storage.exists(path)) {
            throw new Error(`File not found: ${path}`);
        }
        await this.storage.delete(path);
    }
    
    async getFileInfo(path: string): Promise<FileMetadata> {
        if (!await this.storage.exists(path)) {
            throw new Error(`File not found: ${path}`);
        }
        return await this.storage.getMetadata(path);
    }
    
    async listFiles(directory: string): Promise<string[]> {
        return await this.storage.listFiles(directory);
    }
}

// Usage - switch providers easily
const localManager = new FileManager(new LocalStorageProvider('/var/data'));
const s3Manager = new FileManager(new S3StorageProvider('my-bucket', 'us-east-1'));

// Same interface, different implementations
await localManager.uploadFile('test.txt', Buffer.from('Hello'));
await s3Manager.uploadFile('test.txt', Buffer.from('Hello'));

Real Example: Payment Processing

Multiple payment providers with unified interface:

interface PaymentResult {
    success: boolean;
    transactionId: string;
    message: string;
}

interface PaymentProcessor {
    processPayment(amount: number, currency: string): Promise<PaymentResult>;
    refund(transactionId: string, amount: number): Promise<PaymentResult>;
    getTransactionStatus(transactionId: string): Promise<string>;
}

class StripePaymentProcessor implements PaymentProcessor {
    constructor(private apiKey: string) {}
    
    async processPayment(amount: number, currency: string): Promise<PaymentResult> {
        console.log(`Processing $${amount} ${currency} via Stripe`);
        
        // Simulate Stripe API call
        const transactionId = `stripe_${Date.now()}`;
        
        return {
            success: true,
            transactionId,
            message: 'Payment processed successfully'
        };
    }
    
    async refund(transactionId: string, amount: number): Promise<PaymentResult> {
        console.log(`Refunding $${amount} for transaction ${transactionId} via Stripe`);
        
        return {
            success: true,
            transactionId: `refund_${transactionId}`,
            message: 'Refund processed successfully'
        };
    }
    
    async getTransactionStatus(transactionId: string): Promise<string> {
        console.log(`Getting status for ${transactionId} from Stripe`);
        return 'completed';
    }
}

class PayPalPaymentProcessor implements PaymentProcessor {
    constructor(
        private clientId: string,
        private clientSecret: string
    ) {}
    
    async processPayment(amount: number, currency: string): Promise<PaymentResult> {
        console.log(`Processing $${amount} ${currency} via PayPal`);
        
        const transactionId = `paypal_${Date.now()}`;
        
        return {
            success: true,
            transactionId,
            message: 'PayPal payment successful'
        };
    }
    
    async refund(transactionId: string, amount: number): Promise<PaymentResult> {
        console.log(`Refunding $${amount} for transaction ${transactionId} via PayPal`);
        
        return {
            success: true,
            transactionId: `paypal_refund_${transactionId}`,
            message: 'PayPal refund successful'
        };
    }
    
    async getTransactionStatus(transactionId: string): Promise<string> {
        console.log(`Getting status for ${transactionId} from PayPal`);
        return 'completed';
    }
}

// Service layer using composition
class PaymentService {
    private processors = new Map<string, PaymentProcessor>();
    
    registerProcessor(name: string, processor: PaymentProcessor): void {
        this.processors.set(name, processor);
    }
    
    async processPayment(
        processorName: string,
        amount: number,
        currency: string
    ): Promise<PaymentResult> {
        const processor = this.processors.get(processorName);
        if (!processor) {
            throw new Error(`Unknown processor: ${processorName}`);
        }
        
        return await processor.processPayment(amount, currency);
    }
    
    async refundPayment(
        processorName: string,
        transactionId: string,
        amount: number
    ): Promise<PaymentResult> {
        const processor = this.processors.get(processorName);
        if (!processor) {
            throw new Error(`Unknown processor: ${processorName}`);
        }
        
        return await processor.refund(transactionId, amount);
    }
}

// Setup
const paymentService = new PaymentService();
paymentService.registerProcessor('stripe', new StripePaymentProcessor('sk_test_...'));
paymentService.registerProcessor('paypal', new PayPalPaymentProcessor('client_id', 'client_secret'));

// Use different processors
const stripeResult = await paymentService.processPayment('stripe', 100, 'USD');
const paypalResult = await paymentService.processPayment('paypal', 50, 'EUR');

console.log(stripeResult);
console.log(paypalResult);

Multiple Interface Implementation

interface Serializable {
    toJSON(): object;
    fromJSON(data: object): void;
}

interface Validatable {
    validate(): boolean;
    getErrors(): string[];
}

interface Auditable {
    getAuditLog(): AuditEntry[];
}

interface AuditEntry {
    timestamp: Date;
    action: string;
    user: string;
}

class User implements Serializable, Validatable, Auditable {
    private auditLog: AuditEntry[] = [];
    private errors: string[] = [];
    
    constructor(
        public id: string,
        public username: string,
        public email: string,
        public age: number
    ) {}
    
    // Serializable implementation
    toJSON(): object {
        return {
            id: this.id,
            username: this.username,
            email: this.email,
            age: this.age
        };
    }
    
    fromJSON(data: any): void {
        this.id = data.id;
        this.username = data.username;
        this.email = data.email;
        this.age = data.age;
    }
    
    // Validatable implementation
    validate(): boolean {
        this.errors = [];
        
        if (!this.username || this.username.length < 3) {
            this.errors.push('Username must be at least 3 characters');
        }
        
        if (!this.email.includes('@')) {
            this.errors.push('Invalid email format');
        }
        
        if (this.age < 0 || this.age > 150) {
            this.errors.push('Invalid age');
        }
        
        return this.errors.length === 0;
    }
    
    getErrors(): string[] {
        return this.errors;
    }
    
    // Auditable implementation
    getAuditLog(): AuditEntry[] {
        return this.auditLog;
    }
    
    private addAuditEntry(action: string, user: string): void {
        this.auditLog.push({
            timestamp: new Date(),
            action,
            user
        });
    }
    
    updateEmail(newEmail: string, updatedBy: string): void {
        this.email = newEmail;
        this.addAuditEntry(`Email updated to ${newEmail}`, updatedBy);
    }
}

const user = new User('1', 'alice', '[email protected]', 25);

// Use Serializable interface
console.log(user.toJSON());

// Use Validatable interface
if (!user.validate()) {
    console.log(user.getErrors());
}

// Use Auditable interface
user.updateEmail('[email protected]', 'admin');
console.log(user.getAuditLog());

Best Practices

1. Program to Interfaces, Not Implementations

// Bad - depends on concrete class
class OrderService {
    private logger = new ConsoleLogger();  // Tightly coupled!
    
    createOrder(): void {
        this.logger.log('Order created');
    }
}

// Good - depends on interface
class OrderService {
    constructor(private logger: Logger) {}  // Flexible!
    
    createOrder(): void {
        this.logger.log('Order created');
    }
}

2. Keep Interfaces Small and Focused

// Bad - fat interface
interface Repository {
    find(): any[];
    findById(id: string): any;
    save(entity: any): void;
    delete(id: string): void;
    count(): number;
    exportToCSV(): string;
    sendEmail(): void;  // Not repository responsibility!
}

// Good - segregated interfaces
interface Readable<T> {
    find(): T[];
    findById(id: string): T | null;
}

interface Writable<T> {
    save(entity: T): void;
    delete(id: string): void;
}

interface Countable {
    count(): number;
}

// Compose as needed
class UserRepository implements Readable<User>, Writable<User>, Countable {
    // Implement only what's needed
}

3. Use Composition Over Inheritance

// Inheritance - rigid
class FlyingRobot extends Robot implements Flying {}
class SwimmingRobot extends Robot implements Swimming {}
// What about FlyingSwimmingRobot? Multiple inheritance not supported!

// Composition - flexible
interface Flying {
    fly(): void;
}

interface Swimming {
    swim(): void;
}

class Robot {
    constructor(
        private abilities: Array<Flying | Swimming>
    ) {}
    
    performActions(): void {
        this.abilities.forEach(ability => {
            if ('fly' in ability) ability.fly();
            if ('swim' in ability) ability.swim();
        });
    }
}

class FlyingAbility implements Flying {
    fly(): void {
        console.log('Flying');
    }
}

class SwimmingAbility implements Swimming {
    swim(): void {
        console.log('Swimming');
    }
}

// Flexible composition
const flyingRobot = new Robot([new FlyingAbility()]);
const swimmingRobot = new Robot([new SwimmingAbility()]);
const amphibiousRobot = new Robot([new FlyingAbility(), new SwimmingAbility()]);

4. Dependency Injection for Testability

class EmailService {
    constructor(
        private mailer: Mailer,
        private logger: Logger,
        private config: Config
    ) {}
    
    async send(to: string, subject: string, body: string): Promise<void> {
        this.logger.log(`Sending email to ${to}`);
        await this.mailer.send(to, subject, body);
    }
}

// Test setup - inject mocks
const emailService = new EmailService(
    new MockMailer(),
    new MockLogger(),
    new MockConfig()
);

What's Next

You now understand:

• TypeScript interfaces for contracts

• Composition over inheritance

• Strategy pattern for flexibility

• Dependency injection for testability

• Interface segregation

• Programming to interfaces

In Part 5: SOLID Principles and Design Patterns, you'll learn the five SOLID principles, common design patterns (Factory, Singleton, Observer, etc.), and how to build production-ready, maintainable systems.

---

Based on building flexible TypeScript backends with clean architecture, from file storage abstraction to payment processing systems.