Getter and setter with types in Typescript - Mini Project: Build & Apply

Getter and setter with types

📖 Scenario: You are creating a simple TypeScript class to manage a user's profile information. You want to control how the user's age is accessed and updated using getter and setter methods with proper type annotations.

🎯 Goal: Build a TypeScript class called UserProfile that uses a getter and setter for the age property with type safety.

📋 What You'll Learn

Create a class called UserProfile with a private property _age of type number.

Add a getter method called age that returns the value of _age.

Add a setter method called age that accepts a number and sets the value of _age.

Create an instance of UserProfile and set the age to 30 using the setter.

Print the age using the getter.

💡 Why This Matters

🌍 Real World

Getter and setter methods help protect data inside objects and allow controlled access, which is common in real-world software to keep data safe and consistent.

💼 Career

Understanding getters and setters with types is important for writing clean, maintainable TypeScript code, a skill useful for frontend and backend development jobs.

1

Create the UserProfile class with a private _age property

Create a TypeScript class called UserProfile with a private property called _age of type number initialized to 0.

Typescript

class UserProfile {
    // Your code here
}

Hint

Use private _age: number = 0; inside the class to create the private property.

2

Add getter and setter for age with types

Add a getter method called age that returns a number and returns this._age. Add a setter method called age that accepts a parameter value of type number and sets this._age to value.

Typescript

class UserProfile {
    private _age: number = 0;

    // Your getter and setter here
}

Hint

Use get age(): number { return this._age; } and set age(value: number) { this._age = value; }.

3

Create an instance and set age using the setter

Create a variable called user as a new instance of UserProfile. Use the setter to set user.age to 30.

Typescript

class UserProfile {
    private _age: number = 0;

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

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

// Your code here

Hint

Create the instance with const user = new UserProfile(); and set age with user.age = 30;.

4

Print the age using the getter

Write a console.log statement to print user.age.

Typescript

class UserProfile {
    private _age: number = 0;

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

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

const user = new UserProfile();
user.age = 30;

// Your code here

Hint

Use console.log(user.age); to print the age.

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