Get and Set in TypeScript: A Complete Guide for Web Developers

Introduction

TypeScript provides powerful tools to enhance object-oriented programming, and Get and Set methods are prime examples. These methods offer a structured way to access and update object properties while maintaining encapsulation and control. In this complete guide, we will explore how to work with Get and Set methods in TypeScript, including syntax, examples, and their significance in web development.

What Are Get and Set Methods?

In TypeScript, Get methods (getters) and Set methods (setters) are used to define how object properties are accessed and modified. These methods allow developers to add custom logic while maintaining a clean interface for interacting with an object.

• Get Methods: Retrieve property values.
• Set Methods: Update property values with optional validation or transformations.

Syntax of Get and Set Methods in TypeScript

The syntax for defining Get and Set methods in TypeScript is straightforward:

📄

class Example {
    private _property: string;

    // Getter
    get property(): string {
        return this._property;
    }

    // Setter
    set property(value: string) {
        this._property = value;
    }
}

Features and Use Cases of Get and Set Methods

Features

• Enable controlled access to class properties.
• Allow for data validation and transformation.
• Encapsulate logic within a class for better maintainability.

Use Cases

• Validation: Ensuring property values meet specific criteria before assignment.
• Data Transformation: Automatically modifying data before setting a property.
• Encapsulation: Hiding implementation details and exposing only necessary functionality.

Working with Get and Set Methods in TypeScript

Example 1: Basic Get and Set Implementation

📄

class Product {
    private _price: number;

    // Getter
    get price(): number {
        return this._price;
    }

    // Setter
    set price(value: number) {
        if (value < 0) {
            throw new Error("Price cannot be negative.");
        }
        this._price = value;
    }
}

let product = new Product();
product.price = 100; // Calls the setter
console.log(product.price); // Calls the getter

Example 2: Data Transformation in Setters

📄

class User {
    private _email: string;

    get email(): string {
        return this._email;
    }

    set email(value: string) {
        this._email = value.trim().toLowerCase();
    }
}

let user = new User();
user.email = " Example@Domain.Com ";
console.log(user.email); // Output: "example@domain.com"

Example 3: Combining Getters and Setters with Computed Properties

📄

class Rectangle {
    private _width: number;
    private _height: number;

    get area(): number {
        return this._width * this._height;
    }

    set dimensions(value: { width: number; height: number }) {
        this._width = value.width;
        this._height = value.height;
    }
}

let rectangle = new Rectangle();
rectangle.dimensions = { width: 10, height: 5 };
console.log(rectangle.area); // Output: 50

Advantages of Using Get and Set Methods

FAQs on Get and Set Methods

1. What is the primary purpose of Get and Set methods in TypeScript?

Get and Set methods are designed to control how object properties are accessed and modified. They enable data validation, transformation, and encapsulation within a class.

2. Can I use Get and Set methods with TypeScript interfaces?

No, Get and Set methods are only supported in TypeScript classes. Interfaces cannot include method implementations.

3. What happens if I try to set a value without defining a setter?

If a setter is not defined for a property, TypeScript will throw an error when attempting to assign a value directly.

4. Are Get and Set methods mandatory in TypeScript?

No, they are optional. However, they are highly recommended when you need to control or validate property access and updates.

5. Can Get and Set methods improve performance?

While they don't directly improve performance, they enhance code maintainability and prevent issues by validating or transforming data before it is set.

Conclusion

Get and Set methods are invaluable tools for web developers using TypeScript. They provide a structured way to manage object properties while maintaining encapsulation, validation, and clarity in your codebase. By mastering these methods, you can write cleaner, more robust, and maintainable applications.