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