This feature enables developers to encapsulate behavior, enforce constraints, or execute custom logic when interacting with class properties. Whether used for creating read-only properties, implementing computed properties, or performing input validation, accessors provide a flexible and powerful way to enhance the encapsulation and maintainability of TypeScript classes by controlling how their properties are accessed and modified.
class Circle {
private _radius: number = 0;
get radius(): number {
return this._radius;
}
set radius(value: number) {
if (value >= 0) {
this._radius = value;
} else {
console.log("Radius cannot be negative.");
}
}
}
let myCircle = new Circle();
myCircle.radius = 5; // Calls the 'set' accessor
console.log(myCircle.radius); // Calls the 'get' accessor
class ReadOnlyPerson {
private _name: string = "John";
get name(): string {
return this._name;
}
}
let person = new ReadOnlyPerson();
console.log(person.name); // Calls the 'get' accessor
// person.name = "Doe"; // Error: Cannot assign to 'name' because it is a read-only property
Computed Property with Getter
class Rectangle {
private _length: number = 0;
private _width: number = 0;
get area(): number {
return this._length * this._width;
}
}
let myRectangle = new Rectangle();
myRectangle.area; // Calls the 'get' accessor to compute the area
Accessors in Interfaces
interface Shape {
area: number;
}
class Square implements Shape {
private _side: number = 0;
get area(): number {
return this._side * this._side;
}
set side(value: number) {
this._side = value;
}
}
let mySquare = new Square();
mySquare.side = 4; // Calls the 'set' accessor
console.log(mySquare.area); // Calls the 'get' accessor
Running the TypeScript compiler (tsc) will generate the following JavaScript code:
class Square {
constructor() {
this._side = 0;
}
get area() {
return this._side * this._side;
}
set side(value) {
this._side = value;
}
}
let mySquare = new Square();
mySquare.side = 4; // Calls the 'set' accessor
console.log(mySquare.area); // Calls the 'get' accessor
Static Accessors
class MathOperations {
private static _pi: number = 3.14;
static get pi(): number {
return this._pi;
}
}
console.log(MathOperations.pi); // Calls the static 'get' accessor
// MathOperations.pi = 3.14159; // Error: Cannot assign to 'pi' because it is a read-only property
Running the TypeScript compiler (tsc) will generate the following JavaScript code:
class MathOperations {
static get pi() {
return this._pi;
}
}
MathOperations._pi = 3.14;
console.log(MathOperations.pi); // Calls the static 'get' accessor
// MathOperations.pi = 3.14159; // Error: Cannot assign to 'pi' because it is a read-only property
Accessors with Dependency Checks
class Temperature {
private _celsius: number = 0;
get fahrenheit(): number {
return (this._celsius * 9) / 5 + 32;
}
set fahrenheit(value: number) {
this._celsius = ((value - 32) * 5) / 9;
}
}
let temp = new Temperature();
temp.fahrenheit = 32; // Calls the 'set' accessor
console.log(temp.fahrenheit); // Calls the 'get' accessor
Running the TypeScript compiler (tsc) will generate the following JavaScript code:
class Temperature {
constructor() {
this._celsius = 0;
}
get fahrenheit() {
return (this._celsius * 9) / 5 + 32;
}
set fahrenheit(value) {
this._celsius = ((value - 32) * 5) / 9;
}
}
let temp = new Temperature();
temp.fahrenheit = 32; // Calls the 'set' accessor
console.log(temp.fahrenheit); // Calls the 'get' accessor
Conclusion
Accessors are a feature that allows developers to control the read and write access to class properties by defining custom logic through get and set accessors. These accessors enable the encapsulation of behavior, validation, and computation, enhancing the control and flexibility in how class properties are accessed or modified, contributing to more robust and maintainable code.