Getter and setter with types in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this TypeScript getter and setter example?

Consider this TypeScript class with typed getter and setter. What will be printed when the code runs?

Typescript

class Person {
  private _age: number = 0;

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

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

const p = new Person();
p.age = -5;
console.log(p.age);

A 0

B -5

C undefined

D TypeError

💡 Hint

Look at how the setter handles negative values.

The setter checks if the value is less than 0. If yes, it sets _age to 0. So, setting p.age = -5 results in _age being 0. The getter returns this value.

❓ Predict Output

intermediate

What is the output when accessing a getter without a setter?

Look at this TypeScript class with only a getter. What happens when we try to assign a value to the property?

Typescript

class Circle {
  private _radius: number = 5;

  get radius(): number {
    return this._radius;
  }
}

const c = new Circle();
c.radius = 10;
console.log(c.radius);

A 5

B 10

C Compilation error

D TypeError at runtime

💡 Hint

Think about whether you can assign to a getter-only property in TypeScript.

In TypeScript, a property with only a getter is read-only. Trying to assign to it causes a compilation error.

🔧 Debug

advanced

Why does this setter cause a stack overflow error?

Examine this TypeScript class. Why does setting value cause a stack overflow?

Typescript

class Counter {
  private _count = 0;

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

  set count(value: number) {
    this.count = value; // Problem here
  }
}

const counter = new Counter();
counter.count = 5;

A Because the setter calls itself recursively without a base case

B Because the getter is missing a return statement

C Because _count is not initialized

D Because count is declared private

💡 Hint

Look at what happens inside the setter when assigning this.count = value.

The setter calls this.count = value, which calls the setter again, causing infinite recursion and stack overflow.

📝 Syntax

advanced

Which option correctly defines a typed getter and setter in TypeScript?

Choose the option that correctly defines a getter and setter for a name property of type string.

A

class User {
  private _name: string = '';
  get name(): string {
    return this._name;
  }
  set name(value: string) {
    return this._name = value;
  }
}

B

class User {
  private _name: string = '';
  get name() {
    return this._name;
  }
  set name(value) {
    this._name = value;
  }
}

C

class User {
  private _name: string = '';
  get name(): string {
    return this._name;
  }
  set name(value: number) {
    this._name = value;
  }
}

D

class User {
  private _name: string = '';
  get name(): string {
    return this._name;
  }
  set name(value: string) {
    this._name = value;
  }
}

💡 Hint

Check the types of getter return and setter parameter, and the setter body.

Option D correctly types the getter return as string and setter parameter as string. Setter assigns value to private field without returning anything.

🚀 Application

expert

How many items are in the resulting array after using a getter that returns a filtered list?

Given this TypeScript class with a getter that filters items, how many items does filteredItems contain?

Typescript

class Store {
  private items: number[] = [1, 2, 3, 4, 5, 6];

  get filteredItems(): number[] {
    return this.items.filter(x => x % 2 === 0);
  }
}

const store = new Store();
const filtered = store.filteredItems;

A 6

B 3

C 4

D 0

💡 Hint

Count how many even numbers are in the original array.

The original array has 6 numbers: 1,2,3,4,5,6. Even numbers are 2,4,6, so 3 items.