Sling Academy
Home/TypeScript/Class Getter and Setter in TypeScript: A Complete Guide

Class Getter and Setter in TypeScript: A Complete Guide

Last updated: January 08, 2024

Introduction

Understanding getters and setters in TypeScript is key for building encapsulated and maintainable classes. This guide demystifies these concepts with clear examples.

Basics of Getters and Setters

Getters and setters are special methods that provide read and write access to an object’s properties. They’re known as ‘accessors’ and ‘mutators’, respectively. In TypeScript, they are implemented with the get and set keywords.

class User {
  private _email: string = '';

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

  public set email(value: string) {
    if (value.indexOf('@') === -1) {
      throw new Error('Invalid email');
    }
    this._email = value;
  }
}

The User class has a private property _email that is accessed through the publicly exposed getters and setters.

Advantages of Using Accessors

They offer control over how a property is accessed and modified, potentially validating or transforming the data before assigning it.

Using Getters and Setters in Interfaces

Accessors can be specified in TypeScript interfaces to enforce their implementation in classes.

interface IUser {
  get email(): string;
  set email(value: string): void;
}

class User implements IUser {
  // implementation goes here
}

Accessor Signatures in Abstract Classes

Abstract classes can declare accessor signatures, to be implemented in derived classes.

abstract class AbstractUser {
  abstract get email(): string;
  abstract set email(value: string): void;
}

class User extends AbstractUser {
  // implementation goes here
}

Getters and Setters with Computed Properties

Computed properties can be used in conjunction with getters and setters for dynamic property values.

class User {
  private firstName: string;
  private lastName: string;

  public get fullName(): string {
    return `${this.firstName} ${this.lastName}`;
  }

  public set fullName(value: string) {
    [this.firstName, this.lastName] = value.split(' ');
  }
}

Readonly Accessors

Sometimes you may want to provide a readonly property accessor.

class User {
  private password: string;

  public get password(): string {
    throw new Error('Password is write-only');
  }

  public set password(value: string) {
    this.password = value;
  }
}

Advanced Patterns: Using Getters and Setters for Lazy Loading

Accessors can be utilized for lazy initialization patterns, deferring the creation of computationally expensive objects.

class UserProfile {
  private _details?: Details;

  public get details(): Details {
    if (!this._details) {
      this._details = this.loadDetails();
    }
    return this._details;
  }
}

Best Practices

Best practices you should follow when using TypeScript with class getters and setters:

  • Keep accessor methods lightweight.
  • Avoid side effects in getters.
  • Use accessors to enforce invariants.
  • Accessors should not mirror the exact structure of the underlying data.

Conclusion

Getters and setters in TypeScript add a layer of abstraction to properties, allowing control over access and assignment. Mastering their usage can lead to more robust and adaptable code architectures.

Next Article: How to Create Abstract Classes in TypeScript

Previous Article: Class Public and Private Access Modifiers in TypeScript

Series: The First Steps to TypeScript

TypeScript

You May Also Like

  • TypeScript: setInterval() and clearInterval() methods (3 examples)
  • TypeScript sessionStorage: CRUD example
  • Using setTimeout() method with TypeScript (practical examples)
  • Working with window.navigator object in TypeScript
  • TypeScript: Scrolling to a specific location
  • How to resize the current window in TypeScript
  • TypeScript: Checking if an element is a descendant of another element
  • TypeScript: Get the first/last child node of an element
  • TypeScript window.getComputerStyle() method (with examples)
  • Using element.classList.toggle() method in TypeScript (with examples)
  • TypeScript element.classList.remove() method (with examples)
  • TypeScript: Adding Multiple Classes to An Element
  • element.insertAdjacentHTML() method in TypeScript
  • TypeScript – element.innerHTML and element.textContent
  • Using element.removeAttribute() method in TypeScript
  • Working with Document.createElement() in TypeScript
  • Using getElementById() method in TypeScript
  • Using Window prompt() method with TypeScript
  • TypeScript – window.performance.measure() method (with examples)