Getter and setter with types in Typescript - Step-by-Step Execution

Concept Flow - Getter and setter with types

Create class with private property

↓

Define getter method

↓

Define setter method with type check

↓

Create instance

↓

Use getter to read value

↓

Use setter to update value

↓

Value updated with type safety

The flow shows creating a class with a private property, then defining typed getter and setter methods to safely read and update the property.

Execution Sample

Typescript

class Person {
  private _age: number;

  constructor(age: number) {
    this._age = age;
  }

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

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

const p = new Person(30);
console.log(p.age); // 30
p.age = 35;
console.log(p.age); // 35
p.age = -5; // ignored
console.log(p.age); // 35

This code defines a Person class with a private age property and typed getter/setter to control access and enforce non-negative age.

Execution Table

Step	Action	Value of _age	Getter Output	Setter Input	Setter Effect
1	Create Person instance with age=30	30
2	Call getter p.age	30	30
3	Call setter p.age = 35	30		35	Updated _age to 35
4	Call getter p.age	35	35
5	Call setter p.age = -5	35		-5	Ignored (negative value)
6	Call getter p.age	35	35

💡 Setter ignores negative values; _age remains 35 after invalid set.

Variable Tracker

Variable	Start	After Step 1	After Step 3	After Step 5	Final
_age	undefined	30	35	35	35

Key Moments - 2 Insights

Why does the age not change when setting it to -5?

Because the setter checks if the value is negative and ignores it if so, as shown in execution_table step 5.

Why do we use a private property _age instead of a public one?

To control access and enforce rules via getter and setter, preventing invalid values from being set, as seen in the setter logic.

Visual Quiz - 3 Questions

Look at the execution_table at step 3, what happens to _age?

A It changes to -5

B It changes from 30 to 35

C It stays 30

D It becomes undefined

💡 Hint

Check the 'Value of _age' and 'Setter Effect' columns at step 3 in execution_table.

At which step does the setter ignore the input value?

A Step 2

B Step 4

C Step 5

D Step 6

💡 Hint

Look for 'Ignored (negative value)' in the 'Setter Effect' column in execution_table.

If we remove the type check in the setter, what could happen?

A Negative ages could be set

B Getter would stop working

C Private property becomes public

D Constructor would fail

💡 Hint

Consider the setter logic and what happens when invalid values are not checked.

Concept Snapshot

class MyClass {
  private _prop: Type;
  get prop(): Type { return this._prop; }
  set prop(value: Type) {
    // optional validation
    this._prop = value;
  }
}
Use getters/setters to control access with type safety and validation.

Full Transcript

This example shows how to create a class with a private property and use getter and setter methods with types in TypeScript. The getter returns the private value, and the setter updates it only if the new value passes a check (non-negative in this case). The execution table traces creating an instance, reading the value, updating it with valid and invalid inputs, and shows how the setter enforces rules. The variable tracker shows how the private property changes over time. Key moments clarify why invalid values are ignored and why private properties are used. The quiz tests understanding of these steps and effects.

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