Part 1: Classes and Objects - Building Blocks

Introduction

I wrote procedural TypeScript code for my first year—functions that manipulated plain objects, validation scattered across files, business logic mixed with data access. Then I built a user authentication service that needed to handle multiple auth providers (email, OAuth, SAML). The procedural approach became unmanageable.

Classes changed everything. A User class encapsulated all user-related behavior. An AuthProvider class hierarchy handled different authentication methods. Code became organized, testable, and maintainable. This article shows you how to think in objects and build production-ready TypeScript classes.

From Functions to Classes

The Procedural Way

// user-functions.ts
interface UserData {
    id: string;
    email: string;
    passwordHash: string;
    createdAt: Date;
}

function createUser(email: string, password: string): UserData {
    return {
        id: generateId(),
        email: email.toLowerCase().trim(),
        passwordHash: hashPassword(password),
        createdAt: new Date()
    };
}

function validatePassword(user: UserData, password: string): boolean {
    return compareHash(password, user.passwordHash);
}

function isEmailVerified(user: UserData): boolean {
    // Where do we store verification status?
    // Scattered logic!
    return false;
}

Problems:

• Functions and data are separate

• Validation logic scattered

• No clear ownership of behavior

• Hard to extend (what about OAuth users?)

The OOP Way

// User.ts
class User {
    private id: string;
    private email: string;
    private passwordHash: string;
    private createdAt: Date;
    private emailVerified: boolean;

    constructor(email: string, password: string) {
        this.id = this.generateId();
        this.email = email.toLowerCase().trim();
        this.passwordHash = this.hashPassword(password);
        this.createdAt = new Date();
        this.emailVerified = false;
    }

    validatePassword(password: string): boolean {
        return this.compareHash(password, this.passwordHash);
    }

    isEmailVerified(): boolean {
        return this.emailVerified;
    }

    verifyEmail(): void {
        this.emailVerified = true;
    }

    private generateId(): string {
        return crypto.randomUUID();
    }

    private hashPassword(password: string): string {
        return bcrypt.hashSync(password, 10);
    }

    private compareHash(password: string, hash: string): boolean {
        return bcrypt.compareSync(password, hash);
    }
}

Benefits:

• Data and behavior together

• Clear ownership

• Encapsulation (private methods)

• Easy to extend

Class Basics

Defining a Class

class Product {
    // Properties (instance variables)
    id: string;
    name: string;
    price: number;
    inStock: boolean;

    // Constructor - runs when creating new instance
    constructor(id: string, name: string, price: number) {
        this.id = id;
        this.name = name;
        this.price = price;
        this.inStock = true;
    }

    // Methods (instance functions)
    applyDiscount(percentage: number): number {
        return this.price * (1 - percentage / 100);
    }

    markOutOfStock(): void {
        this.inStock = false;
    }
}

Creating Instances (Objects)

// Create instances using 'new' keyword
const laptop = new Product('PROD-001', 'MacBook Pro', 2499.99);
const phone = new Product('PROD-002', 'iPhone 15', 999.99);

// Each instance has its own data
console.log(laptop.name);    // "MacBook Pro"
console.log(phone.name);     // "iPhone 15"

// Call methods
const discountedPrice = laptop.applyDiscount(10);  // $2249.99
phone.markOutOfStock();

console.log(laptop.inStock);  // true
console.log(phone.inStock);   // false

TypeScript Shorthand: Parameter Properties

TypeScript offers a concise syntax for constructor parameters:

// Long way
class User {
    private id: string;
    private email: string;

    constructor(id: string, email: string) {
        this.id = id;
        this.email = email;
    }
}

// TypeScript shorthand - same result!
class User {
    constructor(
        private id: string,
        private email: string
    ) {}
}

Much cleaner! I use this in all my TypeScript classes.

Real Example: Order Management System

I built an e-commerce order system. Here's how classes organized the domain logic:

// Order.ts
class Order {
    constructor(
        private id: string,
        private customerId: string,
        private items: OrderItem[],
        private status: OrderStatus = 'pending',
        private createdAt: Date = new Date()
    ) {}

    calculateTotal(): number {
        return this.items.reduce(
            (sum, item) => sum + item.getSubtotal(),
            0
        );
    }

    canBeCancelled(): boolean {
        return this.status === 'pending' || this.status === 'processing';
    }

    cancel(): void {
        if (!this.canBeCancelled()) {
            throw new Error(
                `Cannot cancel order in ${this.status} status`
            );
        }
        this.status = 'cancelled';
    }

    confirm(): void {
        if (this.status !== 'pending') {
            throw new Error('Only pending orders can be confirmed');
        }
        this.status = 'confirmed';
    }

    ship(trackingNumber: string): void {
        if (this.status !== 'confirmed') {
            throw new Error('Only confirmed orders can be shipped');
        }
        this.status = 'shipped';
        // Store tracking number...
    }

    getDetails() {
        return {
            id: this.id,
            customerId: this.customerId,
            total: this.calculateTotal(),
            status: this.status,
            itemCount: this.items.length,
            createdAt: this.createdAt
        };
    }
}

// OrderItem.ts
class OrderItem {
    constructor(
        private productId: string,
        private productName: string,
        private quantity: number,
        private unitPrice: number
    ) {
        if (quantity <= 0) {
            throw new Error('Quantity must be positive');
        }
    }

    getSubtotal(): number {
        return this.quantity * this.unitPrice;
    }

    increaseQuantity(amount: number): void {
        this.quantity += amount;
    }

    getDetails() {
        return {
            productId: this.productId,
            productName: this.productName,
            quantity: this.quantity,
            unitPrice: this.unitPrice,
            subtotal: this.getSubtotal()
        };
    }
}

type OrderStatus = 'pending' | 'confirmed' | 'processing' | 'shipped' | 'delivered' | 'cancelled';

Using the Order Classes

// Create order items
const items = [
    new OrderItem('PROD-001', 'Laptop', 1, 1200),
    new OrderItem('PROD-002', 'Mouse', 2, 25),
    new OrderItem('PROD-003', 'Keyboard', 1, 80)
];

// Create order
const order = new Order('ORD-12345', 'CUST-789', items);

console.log(order.calculateTotal());  // 1330

// Process order
order.confirm();
order.ship('TRACK-ABC123');

// Try to cancel shipped order
try {
    order.cancel();  // Throws error!
} catch (e) {
    console.log(e.message);  // "Cannot cancel order in shipped status"
}

Why classes here?

• Order and OrderItem encapsulate business rules

• Status transitions controlled by methods

• Invalid operations prevented

• Easy to test each class independently

Static Members

Static members belong to the class itself, not instances:

class EmailValidator {
    // Static property - shared across all instances
    private static emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    // Static method - call on class, not instance
    static isValid(email: string): boolean {
        return this.emailRegex.test(email);
    }

    static normalize(email: string): string {
        return email.toLowerCase().trim();
    }
}

// Call static methods on class
console.log(EmailValidator.isValid('[email protected]'));  // true
console.log(EmailValidator.normalize(' [email protected] '));  // '[email protected]'

// No instance needed!
// const validator = new EmailValidator(); // Not necessary

Real Use Case: Configuration

class DatabaseConfig {
    private static instance: DatabaseConfig;
    
    private constructor(
        private host: string,
        private port: number,
        private database: string
    ) {}

    static getInstance(): DatabaseConfig {
        if (!this.instance) {
            this.instance = new DatabaseConfig(
                process.env.DB_HOST || 'localhost',
                parseInt(process.env.DB_PORT || '5432'),
                process.env.DB_NAME || 'myapp'
            );
        }
        return this.instance;
    }

    getConnectionString(): string {
        return `postgresql://${this.host}:${this.port}/${this.database}`;
    }
}

// Singleton pattern - only one instance exists
const config1 = DatabaseConfig.getInstance();
const config2 = DatabaseConfig.getInstance();
console.log(config1 === config2);  // true - same instance!

Readonly Properties

Prevent property modification after construction:

class Transaction {
    constructor(
        readonly id: string,
        readonly amount: number,
        readonly timestamp: Date
    ) {}

    getInfo() {
        return `Transaction ${this.id}: $${this.amount}`;
    }
}

const txn = new Transaction('TXN-001', 100, new Date());

console.log(txn.id);  // "TXN-001"

// Error: Cannot assign to 'id' because it is a read-only property
// txn.id = 'TXN-002';  

// Error: Cannot assign to 'amount' because it is a read-only property
// txn.amount = 200;

Methods vs Functions

Instance Methods

Access instance data via this:

class ShoppingCart {
    constructor(private items: CartItem[] = []) {}

    addItem(item: CartItem): void {
        this.items.push(item);  // 'this' refers to current instance
    }

    getTotal(): number {
        return this.items.reduce((sum, item) => sum + item.price, 0);
    }

    getItemCount(): number {
        return this.items.length;
    }
}

const cart = new ShoppingCart();
cart.addItem({ name: 'Book', price: 20 });
cart.addItem({ name: 'Pen', price: 5 });

console.log(cart.getTotal());      // 25
console.log(cart.getItemCount());  // 2

Arrow Functions in Classes

Arrow functions have different this binding:

class Button {
    private clickCount = 0;

    // Regular method
    handleClick() {
        this.clickCount++;
        console.log(`Clicked ${this.clickCount} times`);
    }

    // Arrow function - 'this' is lexically bound
    handleClickArrow = () => {
        this.clickCount++;
        console.log(`Clicked ${this.clickCount} times`);
    }
}

const button = new Button();

// Regular method loses 'this' context when passed as callback
const handler1 = button.handleClick;
// handler1();  // Error: this is undefined

// Arrow function maintains 'this' context
const handler2 = button.handleClickArrow;
handler2();  // Works! "Clicked 1 times"

I use arrow functions for event handlers and callbacks.

Real Example: API Client

import axios, { AxiosInstance } from 'axios';

class APIClient {
    private client: AxiosInstance;
    private token: string | null = null;

    constructor(
        private baseURL: string,
        private timeout: number = 10000
    ) {
        this.client = axios.create({
            baseURL: this.baseURL,
            timeout: this.timeout
        });
    }

    setAuthToken(token: string): void {
        this.token = token;
        this.client.defaults.headers.common['Authorization'] = `Bearer ${token}`;
    }

    async get<T>(endpoint: string): Promise<T> {
        const response = await this.client.get<T>(endpoint);
        return response.data;
    }

    async post<T>(endpoint: string, data: any): Promise<T> {
        const response = await this.client.post<T>(endpoint, data);
        return response.data;
    }

    async delete(endpoint: string): Promise<void> {
        await this.client.delete(endpoint);
    }

    isAuthenticated(): boolean {
        return this.token !== null;
    }
}

// Usage
const api = new APIClient('https://api.example.com');

api.setAuthToken('jwt-token-here');

const users = await api.get<User[]>('/users');
const newUser = await api.post<User>('/users', {
    name: 'Alice',
    email: '[email protected]'
});

Class Relationships: Has-A

Classes can contain other classes:

class Address {
    constructor(
        readonly street: string,
        readonly city: string,
        readonly zipCode: string
    ) {}

    format(): string {
        return `${this.street}, ${this.city} ${this.zipCode}`;
    }
}

class Customer {
    constructor(
        private id: string,
        private name: string,
        private email: string,
        private shippingAddress: Address,  // Customer HAS-A Address
        private billingAddress: Address
    ) {}

    getShippingInfo(): string {
        return `${this.name}\n${this.shippingAddress.format()}`;
    }

    updateShippingAddress(newAddress: Address): void {
        this.shippingAddress = newAddress;
    }
}

// Create instances
const shipping = new Address('123 Main St', 'Portland', '97201');
const billing = new Address('456 Oak Ave', 'Seattle', '98101');

const customer = new Customer(
    'CUST-001',
    'Alice Johnson',
    '[email protected]',
    shipping,
    billing
);

console.log(customer.getShippingInfo());
// Alice Johnson
// 123 Main St, Portland 97201

Common Patterns

Factory Method

class PaymentProcessor {
    static createForProvider(provider: string): PaymentProcessor {
        switch (provider) {
            case 'stripe':
                return new PaymentProcessor('https://api.stripe.com', 'stripe-key');
            case 'paypal':
                return new PaymentProcessor('https://api.paypal.com', 'paypal-key');
            default:
                throw new Error(`Unknown provider: ${provider}`);
        }
    }

    constructor(
        private apiUrl: string,
        private apiKey: string
    ) {}

    async processPayment(amount: number): Promise<string> {
        // Payment processing logic
        return 'transaction-id';
    }
}

// Create instances using factory
const stripeProcessor = PaymentProcessor.createForProvider('stripe');
const paypalProcessor = PaymentProcessor.createForProvider('paypal');

Builder Pattern

class QueryBuilder {
    private table: string = '';
    private selectFields: string[] = ['*'];
    private whereConditions: string[] = [];
    private limitValue?: number;

    from(table: string): this {
        this.table = table;
        return this;  // Return 'this' for chaining
    }

    select(...fields: string[]): this {
        this.selectFields = fields;
        return this;
    }

    where(condition: string): this {
        this.whereConditions.push(condition);
        return this;
    }

    limit(count: number): this {
        this.limitValue = count;
        return this;
    }

    build(): string {
        let query = `SELECT ${this.selectFields.join(', ')} FROM ${this.table}`;
        
        if (this.whereConditions.length > 0) {
            query += ` WHERE ${this.whereConditions.join(' AND ')}`;
        }
        
        if (this.limitValue) {
            query += ` LIMIT ${this.limitValue}`;
        }
        
        return query;
    }
}

// Fluent interface - method chaining
const query = new QueryBuilder()
    .from('users')
    .select('id', 'name', 'email')
    .where('active = true')
    .where('age >= 18')
    .limit(10)
    .build();

console.log(query);
// SELECT id, name, email FROM users WHERE active = true AND age >= 18 LIMIT 10

Best Practices

1. Single Responsibility

Each class should have one reason to change:

// Bad: Class doing too much
class User {
    saveToDatabase() { }
    sendWelcomeEmail() { }
    generateReport() { }
    validateInput() { }
}

// Good: Separate concerns
class User {
    constructor(private name: string, private email: string) {}
    
    getName(): string { return this.name; }
    getEmail(): string { return this.email; }
}

class UserRepository {
    save(user: User): void { }
}

class EmailService {
    sendWelcomeEmail(user: User): void { }
}

2. Immutability When Possible

class Money {
    constructor(
        readonly amount: number,
        readonly currency: string
    ) {}

    // Return new instance instead of modifying
    add(other: Money): Money {
        if (this.currency !== other.currency) {
            throw new Error('Currency mismatch');
        }
        return new Money(this.amount + other.amount, this.currency);
    }
}

const price = new Money(100, 'USD');
const total = price.add(new Money(20, 'USD'));  // New instance
console.log(price.amount);  // Still 100
console.log(total.amount);  // 120

3. Meaningful Names

// Bad
class Mgr {
    constructor(private d: string) {}
    proc(): void { }
}

// Good
class OrderManager {
    constructor(private orderId: string) {}
    processOrder(): void { }
}

What's Next

You now know:

• Defining classes with properties and methods

• Creating instances with constructors

• TypeScript parameter properties shorthand

• Static vs instance members

• Readonly properties

• Class composition (has-a relationships)

In Part 2: Encapsulation and Access Modifiers, you'll learn how to protect data with private/public/protected modifiers, create getters/setters, and understand information hiding principles.

---

Based on building TypeScript backend services, domain models, and API clients for production systems.