TypeScript Public, Private, Protected and Readonly Modifiers!

TypeScript Modifiers

The TypeScript supports to multiple modifiers and it is by default public.

1. Public,

2. Private,

3. Protected and

4. Read-only

Public by default! Stayed Informed – Learn Angular 2 with TypeScript

Public Modifier – Public by default! It is freely access anywhere.

In the below example, the class Employee and its members are by default public and we are freely access it.

Example –

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

    salary(salary: number = 10000) {
        console.log('Hello, ' + this.empName + ' Your Salary -' + salary);
    }
}

let empSal = new Employee("Anil");
console.log(empSal.salary());
console.log(empSal.salary(40000));

Private Modifier -When using private modifier, we can’t be accessed from outside of its containing class.

Example as,

class Employee {
    private empName: string;
    constructor(name: string) {
        this.empName = name;
    }

    salary(salary: number = 10000) {
        console.log('Hello, ' + this.empName + ' Your Salary -' + salary);
    }
}

let emp = new Employee("Anil").empName; 
//error: property 'empName' is private and only accesible in the class 'Employee'.

Protected Modifier - The protected modifier is very similar to private but only one difference that can be accessed by instances of deriving classes.

Example as,

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

    salary(salary: number = 10000) {
        console.log('Hello, ' + this.empName + ' Your Salary -' + salary);
    }
}

class Employer extends Employee {
    private department: string;

    constructor(empName: string, department: string) {
        super(empName);
        this.department = department;
    }

    salary(salary = 20000) {
        super.salary(salary);
    }
}

let empSal = new Employer("Anil", "IT");
console.log(empSal.salary());
console.log(empSal.empName); //error- the property 'empName' is protected and only accesible within the class 'Employee' and its child class.

Readonly Modifier - Read-only properties must be initialized at their declaration or in the constructor.

For example as,

class Employee {
    readonly empName: string;
    constructor(name: string) {
        this.empName = name;
    }

    salary(salary: number = 10000) {
        console.log('Hello, ' + this.empName + ' Your Salary -' + salary);
    }
}

let emp = new Employee('Anil');
emp.empName = 'Anil Singh';//error - cannot assign to 'empName' because it is constant or readonly.

Stayed Informed – Learn Angular 2 with TypeScript

I hope you are enjoying with this post! Please share with you friends. Thank you!!

Pin it

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2