Access modifiers in TypeScript: public, private, protected, readonly

What are Access Modifiers?

Access modifiers control the visibility of class properties and methods. TypeScript adds public, private, protected, and readonly modifiers on top of JavaScript's class syntax.

public (Default)

Accessible from anywhere — this is the default:

typescript

class User {
  public name: string;  // Accessible everywhere

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

  public greet(): string {
    return `Hello, ${this.name}`;
  }
}

const user = new User("Alice");
user.name;    // ✅ Accessible
user.greet(); // ✅ Accessible

private

Accessible only within the class itself:

typescript

class BankAccount {
  private balance: number;

  constructor(initial: number) {
    this.balance = initial;
  }

  public deposit(amount: number): void {
    this.balance += amount; // ✅ Access within class
  }

  public getBalance(): number {
    return this.balance; // ✅ Access within class
  }
}

const account = new BankAccount(1000);
account.deposit(500);      // ✅
account.getBalance();      // ✅
account.balance;           // ❌ Error: Property 'balance' is private

TypeScript private vs JavaScript #private

typescript

class Example {
  private tsPrv = 1;  // TypeScript-only (compile-time)
  #jsPrv = 2;         // JavaScript runtime private (ES2022)
}

// TypeScript private: still accessible at runtime (no enforcement)
// JS # private: truly private at runtime

protected

Accessible within the class and its subclasses:

typescript

class Animal {
  protected name: string;

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

  protected makeSound(): string {
    return "...";
  }
}

class Dog extends Animal {
  public bark(): string {
    return `${this.name} says: Woof!`; // ✅ Access in subclass
  }

  public sound(): string {
    return this.makeSound(); // ✅ Protected method accessible in subclass
  }
}

const dog = new Dog("Rex");
dog.bark();  // ✅ "Rex says: Woof!"
dog.name;    // ❌ Error: Property 'name' is protected

readonly

Can be set only in the constructor or at declaration — never modified after:

typescript

class Config {
  readonly apiUrl: string;
  readonly maxRetries: number = 3; // Default value

  constructor(url: string) {
    this.apiUrl = url; // ✅ Set in constructor
  }

  updateUrl() {
    this.apiUrl = "new-url"; // ❌ Error: Cannot assign to 'apiUrl'
  }
}

Parameter Properties (Shorthand)

typescript

// ❌ Verbose
class User {
  private name: string;
  private age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

// ✅ Shorthand with parameter properties
class User {
  constructor(
    private name: string,
    private age: number,
    public readonly id: string
  ) {}
  // Properties are automatically declared and assigned!
}

Modifier	In class	In subclass	Outside
`public`	✅	✅	✅
`protected`	✅	✅	❌
`private`	✅	❌	❌
`readonly`	Set once	Read only	Read only

Use private for internal implementation details, protected for extension points in class hierarchies, and readonly for immutable properties. Prefer parameter properties (shorthand) to reduce boilerplate. For true runtime privacy, use JavaScript's # private fields.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.

Finished reading?

Practice Problems