Close

TypeScript - Access Modifier: public, private and protected access

[Updated: Aug 31, 2018, Created: Aug 30, 2018]

Access modifiers are used to control the direct access of class members.

TypeScript provides following three access modifiers:

Access Modifier Accessible within class Accessible in subclass Accessible externally
via class instance
public (default)
Yes
Yes
Yes
protected
Yes
Yes
No
private
Yes
No
No

If no access modifier is specified then public is assumed.

Examples

Using private

The access modifier 'private' can be used with variables, constructors and methods.

class Person {
    private _name: string;
    private _age: number;

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

    private init() {
       console.log(`person created ${JSON.stringify(this)}`);
    }

    get name(): string {
        return this._name;
    }

    set name(value: string) {
        this._name = value;
    }

    get age(): number {
        return this._age;
    }

    set age(value: number) {
        this._age = value;
    }
}

let person: Person = new Person("Jack", 30);
//console.log(person._name); //error
console.log(person.name); //using getter

Output

person created {"_name":"Jack","_age":30}
Jack

Following is compiled JavaScript code (--target es6)

class Person {
    constructor(name, age) {
        this._name = name;
        this._age = age;
        this.init();
    }
    init() {
        console.log(`person created ${JSON.stringify(this)}`);
    }
    get name() {
        return this._name;
    }
    set name(value) {
        this._name = value;
    }
    get age() {
        return this._age;
    }
    set age(value) {
        this._age = value;
    }
}
let person = new Person("Jack", 30);
//console.log(person._name); //error
console.log(person.name); //using getter

As seen above, there's no equivalent of private modifier in JavaScript compiled code, that means TypeScript's access modifiers are just compile time aid for us.

private constructor

If constructor of a class is private then its instance cannot be created outside. A famous use of private constructor is applying singleton pattern:

class AppContext {
    private static _instance: AppContext = new AppContext();

    private AppContext() {
    }

    public static getInstance(): AppContext {
        return AppContext._instance;
    }

    getData(): any {
        return "test data"
    }
}

let data = AppContext.getInstance().getData();
console.log(data);

Output

test data

Compiled JavaScript code (--target es6)

class AppContext {
    AppContext() {
    }
    static getInstance() {
        return AppContext._instance;
    }
    getData() {
        return "test data";
    }
}
AppContext._instance = new AppContext();
let data = AppContext.getInstance().getData();
console.log(data);

Using protected

Constructors, variables and methods declared with protected modifier can be used in 'this' class and in subclasses only.

class Person {
    protected _name: string;
    protected _age: number;

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

    protected displayAsString(): void {
        console.log(this);
    }
}

class Employee extends Person {
    private _salary: number;

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

    public display(): void {
        super.displayAsString();
    }
}

//let person: Person = new Person("Ashlee", 23); error TS2674: Constructor of class 'Person' is protected and
// only accessible within the class declaration.
let emp: Employee = new Employee("Ashlee", 23, 3000);
//emp.displayAsString();  error TS2445: Property 'displayAsString' is protected and only accessible within
// class 'Person' and its subclasses.
emp.display();

Output

Employee { _name: 'Ashlee', _age: 23, _salary: 3000 }

Compiled JavaScript (--target es6):

class Person {
    constructor(name, age) {
        this._name = name;
        this._age = age;
    }
    displayAsString() {
        console.log(this);
    }
}
class Employee extends Person {
    constructor(name, age, salary) {
        super(name, age);
        this._salary = salary;
    }
    display() {
        super.displayAsString();
    }
}
//let person: Person = new Person("Ashlee", 23); error TS2674: Constructor of class 'Person' is protected and
// only accessible within the class declaration.
let emp = new Employee("Ashlee", 23, 3000);
//emp.displayAsString();  error TS2445: Property 'displayAsString' is protected and only accessible within
// class 'Person' and its subclasses.
emp.display();

Example Project

Dependencies and Technologies Used:

  • TypeScript 3.0.1
Access Modifiers in TypeScript Select All Download
  • typescript-access-modifiers
    • example1-private-variables.ts

    See Also