Access Modifiers in TypeScript

06 Aug 2018

Intermediate

17.7K

Like others programming languages, TypeScript supports access modifiers at the class level. TypeScript supports three access modifiers - public, private, and protected.

Public - By default, members (properties and methods) of TypeScript class are public - so you don’t need to prefix members with the public keyword. Public members are accessible everywhere without restrictions
Private - A private member cannot be accessed outside of its containing class. Private members can be accessed only within the class.
Protected - A protected member cannot be accessed outside of its containing class. Protected members can be accessed only within the class and by the instance of its sub/child class.

In compiled JavaScript code, there will be no such types of restriction on the members.

accessmodifiers.ts

class Foo {
 private x: number;
 protected y: number;
 public z: number;
 saveData(foo: Foo): void {
 this.x = 1; // ok
 this.y = 1; // ok
 this.z = 1; // ok

 foo.x = 1; // ok 
 foo.y = 1; // ok 
 foo.z = 1; // ok
 }
}

class Bar extends Foo {
 getData(foo: Foo, bar: Bar) {
 this.y = 1; // ok
 this.z = 1; // ok

 bar.y = 1; // ok
 bar.z = 1; // ok
 foo.z = 1; // ok

 foo.x = 1; // Error, x only accessible within A 
 bar.x = 1; // Error, x only accessible within A 
 bar.y = 1; // Error, y only accessible through instance of B 
 }
}

The compiled JavaScript (ES5) code for the above TypeScript code is give below:

accessmodifiers.js

var Foo = (function () {
 function Foo() {
 }
 Foo.prototype.saveData = function (foo) {
 this.x = 1; 
 this.y = 1; 
 this.z = 1;
 foo.x = 1; 
 foo.y = 1; 
 foo.z = 1;
 };
 return Foo;
}());
var Bar = (function (_super) {
 __extends(Bar, _super);
 function Bar() {
 return _super.apply(this, arguments) || this;
 }
 Bar.prototype.getData = function (foo, bar) {
 this.y = 1; 
 this.z = 1;
 bar.y = 1; 
 bar.z = 1;
 foo.z = 1;
 foo.x = 1;
 bar.x = 1; 
 bar.y = 1; 
 };
 return Bar;
}(Foo));

Readonly Modifiers

TypeScript supports readonly modifiers on property level by using the readonly keyword. The Readonly properties must be initialized at their declaration or in the constructor.

readonly.ts

class Company {
 readonly country: string = "India";
 readonly name: string;

 constructor(_name: string) {
 this.name = _name;
 }
 showDetails() {
 console.log(this.name + " : " + this.country);
 }
}

let c1 = new Company("Dot Net Tricks Innovation");
c1.showDetails(); // Dot Net Tricks Innovation : India

c1.name = "TCS"; //Error, name can be initialized only within constructor

The compiled JavaScript (ES5) code for the above TypeScript code is give below:

readonly.js

var Company = (function () {
 function Company(_name) {
 this.country = "India";
 this.name = _name;
 }
 Company.prototype.showDetails = function () {
 console.log(this.name + " : " + this.country);
 };
 return Company;
}());
var c1 = new Company("Dot Net Tricks Innovation");
c1.showDetails();
c1.name = "TCS";

Accessors

Just like C# properties accessors, TypeScript supports get/set accessors to access and to set the value to a member of an object. This way give us control over how a member of an object is accessed and set.

accessors.ts

class Employee {
 private passcode: string;
 private _fullName: string;

 constructor(_passcode?: string) {
 this.passcode = _passcode;
 }
 get fullName(): string { //accessing value
 return this._fullName;
 }
 set fullName(newName: string) { //setting value
 if (this.passcode == "secret_passcode") {
 this._fullName = newName;
 }
 else {
 console.log("Error: Unauthorized update of employee!");
 }
 }
}

let e1 = new Employee("secret_passcode");
e1.fullName = "Shailendra Chauhan";
if (e1.fullName) {
 console.log(e1.fullName);
}

let e2 = new Employee();
e2.fullName = "Kanishk Puri"; //Error: Unauthorized update of employee 
if (e2.fullName) {
 console.log(e1.fullName);
}

The compiled JavaScript (ES5) code for the above TypeScript code is give below:

accessors.js

var Employee = (function () {
 function Employee(_passcode) {
 this.passcode = _passcode;
 }
 Object.defineProperty(Employee.prototype, "fullName", {
 get: function () {
 return this._fullName;
 },
 set: function (newName) {
 if (this.passcode == "secret_passcode") {
 this._fullName = newName;
 }
 else {
 console.log("Error: Unauthorized update of employee!");
 }
 },
 enumerable: true,
 configurable: true
 });
 return Employee;
}());
var e1 = new Employee("secret_passcode");
e1.fullName = "Shailendra Chauhan";
if (e1.fullName) {
 console.log(e1.fullName);
}
var e2 = new Employee();
e2.fullName = "Kanishk Puri"; //Error: Unauthorized update of employee 
if (e2.fullName) {
 console.log(e1.fullName);
}