TypeScript Getters & Setters

Control property access with accessors

🎛️ What are Getters & Setters?

Getters and setters are special methods that provide controlled access to class properties. Getters retrieve values, setters update them. They allow validation, computed properties, and encapsulation while maintaining simple property-like syntax for users. 


class Person {
    private _age: number = 0;
    
    get age(): number {
        return this._age;
    }
    
    set age(value: number) {
        this._age = value;
    }
}

Getter & Setter Concepts

📥

Getter

Retrieve property values 

get fullName(): string {
    return `${this.first} ${this.last}`;
}
📤

Setter

Update property values 

set age(value: number) {
    if (value > 0) {
        this._age = value;
    }
}
✅

Validation

Validate before setting values 

set email(value: string) {
    if (value.includes('@')) {
        this._email = value;
    }
}
🧮

Computed

Calculate values on the fly 

get area(): number {
    return this.width * this.height;
}

🔹 Basic Getter Example

Getters allow you to access private properties: 

class Product {
    private _price: number;
    private _name: string;
    
    constructor(name: string, price: number) {
        this._name = name;
        this._price = price;
    }
    
    get name(): string {
        return this._name;
    }
    
    get price(): number {
        return this._price;
    }
    
    get priceWithTax(): number {
        return this._price * 1.1;  // 10% tax
    }
}

const laptop = new Product("Laptop", 1000);
console.log(laptop.name);         // Laptop
console.log(laptop.price);        // 1000
console.log(laptop.priceWithTax); // 1100

Output: 

Laptop
1000
1100

🔹 Basic Setter Example

Setters allow you to update private properties with validation: 

class User {
    private _username: string = "";
    private _age: number = 0;
    
    get username(): string {
        return this._username;
    }
    
    set username(value: string) {
        if (value.length >= 3) {
            this._username = value;
        } else {
            console.log("Username must be at least 3 characters");
        }
    }
    
    get age(): number {
        return this._age;
    }
    
    set age(value: number) {
        if (value > 0 && value < 120) {
            this._age = value;
        } else {
            console.log("Invalid age");
        }
    }
}

const user = new User();
user.username = "Jo";      // Username must be at least 3 characters
user.username = "John";    // ✅ Valid
user.age = 25;             // ✅ Valid
console.log(user.username); // John
console.log(user.age);      // 25

Output: 

Username must be at least 3 characters
John
25

🔹 Computed Properties

Getters can calculate values dynamically: 

class Rectangle {
    constructor(
        private width: number,
        private height: number
    ) {}
    
    get area(): number {
        return this.width * this.height;
    }
    
    get perimeter(): number {
        return 2 * (this.width + this.height);
    }
    
    get isSquare(): boolean {
        return this.width === this.height;
    }
}

const rect = new Rectangle(5, 10);
console.log(`Area: ${rect.area}`);           // Area: 50
console.log(`Perimeter: ${rect.perimeter}`); // Perimeter: 30
console.log(`Is square: ${rect.isSquare}`);  // Is square: false

const square = new Rectangle(5, 5);
console.log(`Is square: ${square.isSquare}`); // Is square: true

Output: 

Area: 50
Perimeter: 30
Is square: false
Is square: true

🔹 Full Name Example

Combine getters and setters for complex properties: 

class Person {
    private firstName: string = "";
    private lastName: string = "";
    
    get fullName(): string {
        return `${this.firstName} ${this.lastName}`;
    }
    
    set fullName(value: string) {
        const parts = value.split(' ');
        if (parts.length === 2) {
            this.firstName = parts[0];
            this.lastName = parts[1];
        } else {
            console.log("Please provide first and last name");
        }
    }
}

const person = new Person();
person.fullName = "John Doe";
console.log(person.fullName);  // John Doe

person.fullName = "Jane Smith";
console.log(person.fullName);  // Jane Smith

person.fullName = "SingleName"; // Please provide first and last name

Output: 

John Doe
Jane Smith
Please provide first and last name

🔹 Temperature Converter

Use getters and setters for unit conversion: 

class Temperature {
    private celsius: number = 0;
    
    get c(): number {
        return this.celsius;
    }
    
    set c(value: number) {
        this.celsius = value;
    }
    
    get f(): number {
        return (this.celsius * 9/5) + 32;
    }
    
    set f(value: number) {
        this.celsius = (value - 32) * 5/9;
    }
}

const temp = new Temperature();
temp.c = 0;
console.log(`${temp.c}°C = ${temp.f}°F`);  // 0°C = 32°F

temp.f = 100;
console.log(`${temp.c}°C = ${temp.f}°F`);  // 37.77°C = 100°F

Output: 

0°C = 32°F
37.77777777777778°C = 100°F

💡 Key Points:

  • Getters use the get keyword and return a value
  • Setters use the set keyword and accept one parameter
  • Access getters/setters like regular properties (no parentheses)
  • Use setters for validation before updating values
  • Use getters for computed properties that don't need storage
  • Private properties often use underscore prefix: _propertyName

🧠 Test Your Knowledge

What keyword is used to define a getter in TypeScript?