Why Getter and setter with types in Typescript? - Purpose & Use Cases

The Big Idea

What if you could stop bugs caused by wrong data updates with just a simple code trick?

The Scenario

Imagine you have an object representing a person, and you want to control how their age is accessed and changed. Without getters and setters, you have to manually check and update the age everywhere in your code.

The Problem

Manually checking and updating values everywhere is slow and easy to forget. It can cause bugs if you accidentally set invalid ages or read outdated data. This makes your code messy and hard to maintain.

The Solution

Getters and setters let you control how properties are read and written in one place. With types, you ensure only valid data is used, catching mistakes early and keeping your code clean and safe.

Before vs After

✗ Before

person.age = -5; // no check, can cause errors
console.log(person.age);

✓ After

private _age: number = 0;

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

What It Enables

It enables safe, clear, and typed control over object properties, preventing errors and making your code easier to understand and maintain.

Real Life Example

In a user profile, you can use getters and setters with types to ensure the user's age is always a positive number, avoiding invalid data that could break your app.

Key Takeaways

Manual property handling is error-prone and scattered.

Getters and setters centralize control with type safety.

This leads to cleaner, safer, and more maintainable code.

Practice

1.

What is the main purpose of using getter and setter in TypeScript classes?

easy

A. To make functions run faster

B. To create new classes automatically

C. To control how properties are accessed and modified with type safety

D. To declare variables without types

Solution

1. Step 1: Understand getter and setter roles

   Getters and setters allow controlled access to class properties, letting you add logic when reading or writing values.

2. Step 2: Recognize type safety benefit

   Using types with getters and setters ensures only valid data is assigned or returned, keeping data safe.

3. Final Answer:

   To control how properties are accessed and modified with type safety -> Option C

4. Quick Check:

   Getter and setter purpose = control access + type safety [OK]

Hint: Getters/setters control property access safely [OK]

Common Mistakes:

• Thinking getters/setters create new classes
• Believing they improve function speed
• Confusing them with variable declarations

2.

Which of the following is the correct syntax to define a typed getter for a property name of type string in a TypeScript class?

class Person {
  private _name: string;

  constructor(name: string) {
    this._name = name;
  }

  // What is the correct getter syntax here?
}

easy

A. get name(): string { return this._name; }

B. get name { return this._name; }

C. getter name(): string { return this._name; }

D. get name(): void { return this._name; }

Solution

1. Step 1: Recall getter syntax in TypeScript

   The getter uses the keyword get, followed by the property name, parentheses, and a return type.

2. Step 2: Check return type matches property type

   The getter must return a string since _name is a string.

3. Final Answer:

   get name(): string { return this._name; } -> Option A

4. Quick Check:

   Getter syntax = get + name() + return type [OK]

Hint: Getter needs 'get', name(), and correct return type [OK]

Common Mistakes:

• Omitting parentheses after getter name
• Using wrong keyword like 'getter'
• Setting return type to void instead of string

3.

What will be the output of the following TypeScript code?

class Counter {
  private _count: number = 0;

  get count(): number {
    return this._count;
  }

  set count(value: number) {
    if (value >= 0) {
      this._count = value;
    }
  }
}

const c = new Counter();
c.count = 5;
c.count = -3;
console.log(c.count);

medium

A. undefined

B. 5

C. 0

D. -3

Solution

1. Step 1: Analyze setter behavior

   The setter only updates _count if the new value is >= 0. Setting to 5 updates it, setting to -3 is ignored.

2. Step 2: Check final value returned by getter

   The getter returns the current _count, which remains 5 after the invalid -3 assignment.

3. Final Answer:

   5 -> Option B

4. Quick Check:

   Setter blocks negative, final count = 5 [OK]

Hint: Setter blocks negative values, so count stays 5 [OK]

Common Mistakes:

• Assuming setter accepts negative values
• Expecting count to be -3 after invalid set
• Confusing initial value with final output

4.

Identify the error in this TypeScript class using getter and setter:

class User {
  private _age: number;

  get age(): number {
    return this._age;
  }

  set age(value: string) {
    this._age = Number(value);
  }
}

medium

A. Setter parameter type should be number, not string

B. Getter must return string, not number

C. Private property _age should be string

D. Setter cannot convert string to number

Solution

1. Step 1: Compare getter and setter types

   The getter returns a number, so the setter should accept a number to keep types consistent.

2. Step 2: Identify mismatch in setter parameter

   The setter takes a string but assigns to a number property, causing a type mismatch.

3. Final Answer:

   Setter parameter type should be number, not string -> Option A

4. Quick Check:

   Setter param type must match property type [OK]

Hint: Setter param type must match property type [OK]

Common Mistakes:

• Allowing setter param type different from property
• Thinking getter return type should change
• Believing setter can't convert types

5.

Given this TypeScript class, what will console.log(user.fullName); output?

class User {
  private _firstName: string;
  private _lastName: string;

  constructor(firstName: string, lastName: string) {
    this._firstName = firstName;
    this._lastName = lastName;
  }

  get fullName(): string {
    return `${this._firstName} ${this._lastName}`;
  }

  set fullName(name: string) {
    const parts = name.split(' ');
    if (parts.length === 2) {
      [this._firstName, this._lastName] = parts;
    }
  }
}

const user = new User('Jane', 'Doe');
user.fullName = 'John Smith';
console.log(user.fullName);

hard

A. Jane Doe

B. Jane Smith

C. John Doe

D. John Smith

Solution

1. Step 1: Understand setter logic

   The setter splits the input string by space and updates _firstName and _lastName only if there are exactly two parts.

2. Step 2: Apply setter and check getter output

   Setting fullName to 'John Smith' updates the names. The getter then returns 'John Smith'.

3. Final Answer:

   John Smith -> Option D

4. Quick Check:

   Setter splits and updates names, getter returns combined string [OK]

Hint: Setter splits fullName, getter joins first and last [OK]

Common Mistakes:

• Assuming original names stay after setter call
• Expecting only first or last name to change
• Ignoring setter condition on split length