Classes and OOP

The Security Breach That Never Happened

It was code review day. A junior developer had submitted a PR for our payment processing service.

// payment-service.js - Old JavaScript code
class PaymentProcessor {
  constructor(apiKey, secretKey) {
    this.apiKey = apiKey;
    this.secretKey = secretKey;
  }
  
  processPayment(amount, cardToken) {
    // All properties are public!
    const signature = this.generateSignature(amount, cardToken);
    return fetch('/api/payments', {
      headers: {
        'X-API-Key': this.apiKey,
        'X-Signature': signature
      }
    });
  }
  
  generateSignature(amount, cardToken) {
    return crypto.createHmac('sha256', this.secretKey)
      .update(`${amount}:${cardToken}`)
      .digest('hex');
  }
}

// Later in the code...
const processor = new PaymentProcessor(API_KEY, SECRET_KEY);

// Someone logged the entire object for debugging
console.log('Processor:', processor);
// OUTPUT: { apiKey: '...', secretKey: '...' }  // SECRET EXPOSED!

The secretKey was accessible. It got logged. It almost made it to our logging service. If this had gone to production, our payment credentials would have been in plain text logs.

I caught it during code review. We migrated to TypeScript:

class PaymentProcessor {
  private apiKey: string;
  private secretKey: string;
  
  constructor(apiKey: string, secretKey: string) {
    this.apiKey = apiKey;
    this.secretKey = secretKey;
  }
  
  public processPayment(amount: number, cardToken: string): Promise<Response> {
    const signature = this.generateSignature(amount, cardToken);
    return fetch('/api/payments', {
      headers: {
        'X-API-Key': this.apiKey,
        'X-Signature': signature
      },
      body: JSON.stringify({ amount, cardToken })
    });
  }
  
  private generateSignature(amount: number, cardToken: string): string {
    return crypto.createHmac('sha256', this.secretKey)
      .update(`${amount}:${cardToken}`)
      .digest('hex');
  }
}

// Now this is a compile error:
const processor = new PaymentProcessor(API_KEY, SECRET_KEY);
// console.log(processor.secretKey);  // ✗ Error: Property 'secretKey' is private

Result: Private credentials stayed private. The compiler prevented accidental exposure.

This article covers TypeScript's class features that turn design intentions into compiler-enforced guarantees.

---

Basic Class Syntax

Classes in TypeScript build on JavaScript with type annotations.

Simple Class

class User {
  name: string;
  email: string;
  
  constructor(name: string, email: string) {
    this.name = name;
    this.email = email;
  }
  
  greet(): string {
    return `Hello, I'm ${this.name}`;
  }
}

const user = new User('John', '[email protected]');
console.log(user.greet());  // "Hello, I'm John"

Property Initialization

class Counter {
  count: number = 0;  // Initialize at declaration
  
  increment(): void {
    this.count++;
  }
  
  reset(): void {
    this.count = 0;
  }
}

const counter = new Counter();
console.log(counter.count);  // 0
counter.increment();
console.log(counter.count);  // 1

---

Access Modifiers

Control property and method visibility.

public (default)

class User {
  public name: string;  // Explicit public
  
  constructor(name: string) {
    this.name = name;
  }
}

const user = new User('John');
console.log(user.name);  // ✓ Accessible
user.name = 'Jane';      // ✓ Can modify

private

class BankAccount {
  private balance: number = 0;
  
  deposit(amount: number): void {
    this.balance += amount;
  }
  
  getBalance(): number {
    return this.balance;
  }
}

const account = new BankAccount();
account.deposit(100);
console.log(account.getBalance());  // 100

// account.balance = 1000000;  // ✗ Error: Property 'balance' is private

protected

class Animal {
  protected name: string;
  
  constructor(name: string) {
    this.name = name;
  }
}

class Dog extends Animal {
  bark(): void {
    console.log(`${this.name} says woof!`);  // ✓ Accessible in subclass
  }
}

const dog = new Dog('Rex');
dog.bark();  // "Rex says woof!"

// console.log(dog.name);  // ✗ Error: Property 'name' is protected

Real-World Example

class User {
  public id: string;
  public email: string;
  private passwordHash: string;
  protected createdAt: Date;
  
  constructor(id: string, email: string, password: string) {
    this.id = id;
    this.email = email;
    this.passwordHash = this.hashPassword(password);
    this.createdAt = new Date();
  }
  
  public verifyPassword(password: string): boolean {
    return this.hashPassword(password) === this.passwordHash;
  }
  
  private hashPassword(password: string): string {
    // Simplified hashing
    return Buffer.from(password).toString('base64');
  }
}

class AdminUser extends User {
  private permissions: string[];
  
  constructor(id: string, email: string, password: string, permissions: string[]) {
    super(id, email, password);
    this.permissions = permissions;
  }
  
  getAccountAge(): number {
    // Can access protected createdAt
    return Date.now() - this.createdAt.getTime();
  }
}

---

Parameter Properties

Shorthand for constructor parameters that become class properties.

Before Parameter Properties

class User {
  name: string;
  email: string;
  
  constructor(name: string, email: string) {
    this.name = name;
    this.email = email;
  }
}

With Parameter Properties

class User {
  constructor(
    public name: string,
    public email: string
  ) {}
  // Properties are automatically created and assigned
}

const user = new User('John', '[email protected]');
console.log(user.name);  // "John"

Mixed Access Modifiers

class User {
  constructor(
    public id: string,
    public name: string,
    private passwordHash: string,
    protected createdAt: Date = new Date()
  ) {}
  
  verifyPassword(password: string): boolean {
    return hashPassword(password) === this.passwordHash;
  }
}

---

Readonly Properties

Properties that cannot be reassigned after initialization.

Basic Readonly

class User {
  readonly id: string;
  name: string;
  
  constructor(id: string, name: string) {
    this.id = id;
    this.name = name;
  }
  
  updateName(name: string): void {
    this.name = name;  // ✓ Allowed
  }
  
  updateId(id: string): void {
    // this.id = id;  // ✗ Error: Cannot assign to 'id' because it is read-only
  }
}

Readonly Parameter Properties

class Config {
  constructor(
    public readonly apiUrl: string,
    public readonly apiKey: string,
    public timeout: number
  ) {}
}

const config = new Config('https://api.example.com', 'secret-key', 5000);

config.timeout = 10000;  // ✓ Allowed
// config.apiUrl = 'new-url';  // ✗ Error: Cannot assign to readonly property

---

Getters and Setters

Control property access with methods.

Basic Accessor

class User {
  private _email: string;
  
  constructor(email: string) {
    this._email = email;
  }
  
  get email(): string {
    return this._email;
  }
  
  set email(value: string) {
    if (!value.includes('@')) {
      throw new Error('Invalid email');
    }
    this._email = value;
  }
}

const user = new User('[email protected]');
console.log(user.email);  // "[email protected]"

user.email = '[email protected]';  // ✓ Valid
// user.email = 'invalid';  // ✗ Throws error

Computed Properties

class Rectangle {
  constructor(
    public width: number,
    public height: number
  ) {}
  
  get area(): number {
    return this.width * this.height;
  }
  
  get perimeter(): number {
    return 2 * (this.width + this.height);
  }
}

const rect = new Rectangle(10, 5);
console.log(rect.area);       // 50
console.log(rect.perimeter);  // 30

Validation in Setters

class Temperature {
  private _celsius: number;
  
  constructor(celsius: number) {
    this._celsius = celsius;
  }
  
  get celsius(): number {
    return this._celsius;
  }
  
  set celsius(value: number) {
    if (value < -273.15) {
      throw new Error('Temperature below absolute zero!');
    }
    this._celsius = value;
  }
  
  get fahrenheit(): number {
    return (this._celsius * 9/5) + 32;
  }
  
  set fahrenheit(value: number) {
    this.celsius = (value - 32) * 5/9;
  }
}

const temp = new Temperature(0);
console.log(temp.celsius);     // 0
console.log(temp.fahrenheit);  // 32

temp.fahrenheit = 212;
console.log(temp.celsius);     // 100

---

Static Members

Properties and methods that belong to the class itself.

Static Properties

class Config {
  static readonly APP_NAME = 'My App';
  static readonly VERSION = '1.0.0';
  
  static getInfo(): string {
    return `${this.APP_NAME} v${this.VERSION}`;
  }
}

console.log(Config.APP_NAME);   // "My App"
console.log(Config.getInfo());  // "My App v1.0.0"

// const config = new Config();
// config.APP_NAME  // ✗ Error: Static members accessed via class, not instance

Static Factory Methods

class User {
  private constructor(
    public id: string,
    public name: string,
    public email: string
  ) {}
  
  static create(name: string, email: string): User {
    const id = generateId();
    return new User(id, name, email);
  }
  
  static fromJSON(json: string): User {
    const data = JSON.parse(json);
    return new User(data.id, data.name, data.email);
  }
}

const user1 = User.create('John', '[email protected]');
const user2 = User.fromJSON('{"id":"123","name":"Jane","email":"[email protected]"}');

// const user3 = new User('123', 'Bob', '[email protected]');  // ✗ Error: Constructor is private

---

Abstract Classes

Base classes that cannot be instantiated directly.

Basic Abstract Class

abstract class Shape {
  constructor(public color: string) {}
  
  abstract getArea(): number;
  
  describe(): string {
    return `A ${this.color} shape with area ${this.getArea()}`;
  }
}

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

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

const circle = new Circle('red', 5);
console.log(circle.describe());  // "A red shape with area 78.54..."

// const shape = new Shape('blue');  // ✗ Error: Cannot create instance of abstract class

---

Implementing Interfaces

Classes can implement one or more interfaces.

Single Interface

interface Printable {
  print(): string;
}

class User implements Printable {
  constructor(
    public name: string,
    public email: string
  ) {}
  
  print(): string {
    return `${this.name} (${this.email})`;
  }
}

class Product implements Printable {
  constructor(
    public name: string,
    public price: number
  ) {}
  
  print(): string {
    return `${this.name}: $${this.price}`;
  }
}

Multiple Interfaces

interface Identifiable {
  id: string;
}

interface Timestamped {
  createdAt: Date;
  updatedAt: Date;
}

class User implements Identifiable, Timestamped {
  constructor(
    public id: string,
    public name: string,
    public createdAt: Date = new Date(),
    public updatedAt: Date = new Date()
  ) {}
  
  update(name: string): void {
    this.name = name;
    this.updatedAt = new Date();
  }
}

---

Real-World Patterns

1. Repository Pattern

interface Repository<T> {
  findById(id: string): Promise<T | null>;
  findAll(): Promise<T[]>;
  create(item: Omit<T, 'id'>): Promise<T>;
  update(id: string, item: Partial<T>): Promise<T>;
  delete(id: string): Promise<boolean>;
}

class UserRepository implements Repository<User> {
  private users: Map<string, User> = new Map();
  
  async findById(id: string): Promise<User | null> {
    return this.users.get(id) || null;
  }
  
  async findAll(): Promise<User[]> {
    return Array.from(this.users.values());
  }
  
  async create(item: Omit<User, 'id'>): Promise<User> {
    const user: User = {
      id: generateId(),
      ...item as User
    };
    this.users.set(user.id, user);
    return user;
  }
  
  async update(id: string, updates: Partial<User>): Promise<User> {
    const user = await this.findById(id);
    if (!user) throw new Error('User not found');
    
    const updated = { ...user, ...updates };
    this.users.set(id, updated);
    return updated;
  }
  
  async delete(id: string): Promise<boolean> {
    return this.users.delete(id);
  }
}

2. Service Layer Pattern

class AuthService {
  constructor(
    private userRepository: UserRepository,
    private jwtService: JWTService
  ) {}
  
  async login(email: string, password: string): Promise<string> {
    const users = await this.userRepository.findAll();
    const user = users.find(u => u.email === email);
    
    if (!user || !this.verifyPassword(password, user.passwordHash)) {
      throw new Error('Invalid credentials');
    }
    
    return this.jwtService.sign({ userId: user.id });
  }
  
  async register(email: string, password: string, name: string): Promise<User> {
    const passwordHash = this.hashPassword(password);
    return this.userRepository.create({ email, passwordHash, name });
  }
  
  private hashPassword(password: string): string {
    // Implementation
    return '';
  }
  
  private verifyPassword(password: string, hash: string): boolean {
    // Implementation
    return true;
  }
}

3. Builder Pattern

class QueryBuilder {
  private conditions: string[] = [];
  private orderByClause: string = '';
  private limitClause: string = '';
  
  where(condition: string): this {
    this.conditions.push(condition);
    return this;
  }
  
  orderBy(field: string, direction: 'ASC' | 'DESC' = 'ASC'): this {
    this.orderByClause = `ORDER BY ${field} ${direction}`;
    return this;
  }
  
  limit(count: number): this {
    this.limitClause = `LIMIT ${count}`;
    return this;
  }
  
  build(): string {
    let query = 'SELECT * FROM users';
    
    if (this.conditions.length > 0) {
      query += ' WHERE ' + this.conditions.join(' AND ');
    }
    
    if (this.orderByClause) {
      query += ' ' + this.orderByClause;
    }
    
    if (this.limitClause) {
      query += ' ' + this.limitClause;
    }
    
    return query;
  }
}

const query = new QueryBuilder()
  .where('age > 18')
  .where('active = true')
  .orderBy('created_at', 'DESC')
  .limit(10)
  .build();

---

Your Challenge

Build a type-safe shopping cart system:

// TODO: Implement these classes

abstract class Product {
  constructor(
    public readonly id: string,
    public name: string,
    public price: number
  ) {}
  
  abstract getDescription(): string;
  abstract calculateTotal(quantity: number): number;
}

class PhysicalProduct extends Product {
  constructor(
    id: string,
    name: string,
    price: number,
    public weight: number,
    public shippingCost: number
  ) {
    super(id, name, price);
  }
  
  // TODO: Implement
  getDescription(): string {
    // Return description with weight
  }
  
  calculateTotal(quantity: number): number {
    // Include shipping cost
  }
}

class DigitalProduct extends Product {
  constructor(
    id: string,
    name: string,
    price: number,
    public downloadUrl: string
  ) {
    super(id, name, price);
  }
  
  // TODO: Implement
  getDescription(): string {
    // Return description for digital product
  }
  
  calculateTotal(quantity: number): number {
    // No shipping cost
  }
}

class CartItem {
  constructor(
    public product: Product,
    private quantity: number
  ) {}
  
  getQuantity(): number {
    return this.quantity;
  }
  
  setQuantity(quantity: number): void {
    if (quantity < 1) throw new Error('Quantity must be at least 1');
    this.quantity = quantity;
  }
  
  getTotal(): number {
    return this.product.calculateTotal(this.quantity);
  }
}

class ShoppingCart {
  private items: CartItem[] = [];
  
  addItem(product: Product, quantity: number = 1): void {
    // TODO: Implement
  }
  
  removeItem(productId: string): void {
    // TODO: Implement
  }
  
  updateQuantity(productId: string, quantity: number): void {
    // TODO: Implement
  }
  
  getTotal(): number {
    // TODO: Implement
  }
  
  checkout(): Order {
    // TODO: Implement - create order from cart
  }
}

// Requirements:
// 1. Use abstract classes
// 2. Use access modifiers (public, private, protected)
// 3. Use readonly where appropriate
// 4. Implement proper encapsulation
// 5. Use getters/setters for validation

---

Key Takeaways

1. Access modifiers - public, private, protected control visibility

2. Parameter properties - shorthand for constructor parameters

3. Readonly - prevent reassignment after initialization

4. Getters/setters - control property access

5. Static members - belong to class, not instances

6. Abstract classes - define contracts for subclasses

7. Implements - classes can implement interfaces

8. Encapsulation - hide implementation details

---

What I Learned

The payment security incident taught me: access modifiers aren't documentation - they're guarantees.

In JavaScript:

class PaymentProcessor {
  constructor(apiKey, secretKey) {
    this.secretKey = secretKey;  // Anyone can access this!
  }
}

Everything is public. Logging objects exposes secrets. Debugging leaks credentials. One console.log away from disaster.

In TypeScript:

class PaymentProcessor {
  private secretKey: string;  // Compiler enforces privacy
  
  constructor(apiKey: string, secretKey: string) {
    this.secretKey = secretKey;
  }
}

// processor.secretKey  // ✗ Compile error - can't access

The compiler prevents accidental exposure. Private means actually private. Design intentions become enforced constraints.

Before TypeScript, we had conventions:

• "Don't access _privateField"

• "Use getters/setters"

• "Read the documentation"

After TypeScript, we have guarantees:

• Private fields cannot be accessed outside the class

• Readonly fields cannot be reassigned

• Abstract methods must be implemented

Access modifiers turn code review findings into compile-time errors.

The security vulnerability was caught in review. With TypeScript, it would have been caught instantly during development.

Make invalid access impossible. Let the compiler guard your secrets.

---

Next: Enums

In the next article, we'll explore TypeScript enums. You'll learn how const enums helped reduce our bundle size by 40KB while improving type safety.