Classes & Access Modifiers

Classes in TypeScript come with several common traps that catch developers off guard, especially those coming from JavaScript. Let's walk through each one.

Trap 1: Forgetting to declare properties. In JavaScript, you can just write this.name = name in the constructor without any declaration. In TypeScript, you MUST declare the property first, or use parameter properties:

// ERROR - property not declared
class X {
  constructor(name: string) {
    this.name = name; // ERROR!
  }
}

// FIX 1: Declare explicitly
class X1 {
  name: string;
  constructor(name: string) {
    this.name = name; // OK
  }
}

// FIX 2: Parameter property
class X2 {
  constructor(public name: string) {}
}

Trap 2: Accessing private from outside. TypeScript blocks this at compile time, but at runtime the property is still there:

class A {
  private x = 1;
}
const a = new A();
// a.x; // TS ERROR at compile time
// But at runtime: a.x === 1 !

Don't rely on TypeScript's private for actual security — it's a type-level constraint only!

Trap 3: Private vs protected confusion. Private means "only THIS class." Protected means "this class AND subclasses." If you need subclasses to access something, it must be protected, not private:

class Parent {
  private secret = "mine";
  protected shared = "ours";
}
class Child extends Parent {
  read() {
    // this.secret; // ERROR
    this.shared;    // OK
  }
}

Trap 4: Parameter property without modifier. Writing constructor(name: string) does NOT create a property. You need the modifier keyword: constructor(public name: string). Without public, private, or protected, it's just a normal parameter that vanishes after the constructor runs.

Trap 5: Readonly vs private. These serve completely different purposes! readonly means "can't be modified but CAN be read from outside." private means "can't be accessed from outside at all." Use readonly for immutable data you want to expose. Use private for internal details you want to hide.