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 Outputperson 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); Outputtest 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();
OutputEmployee { _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 ProjectDependencies and Technologies Used: |