Access Modifiers in TypeScript

Amit Kumar  Print   3 min read  
06 Aug 2018
 
Intermediate
3.42K

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

  1. 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

  2. Private - A private member cannot be accessed outside of its containing class. Private members can be accessed only within the class.

  3. 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);
}

Learn to Crack Your Technical Interview

 
Learn to Code

Start your journey today to learn coding!


Because learning to code is the first step and foreward to advance your career.


 GET STARTED NOW 

+
+