Constructor parameter types in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this TypeScript class constructor?

Consider this TypeScript class with typed constructor parameters. What will be the output when creating an instance and logging its properties?

Typescript

class Person {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}
const p = new Person('Alice', 30);
console.log(`${p.name} is ${p.age} years old.`);

A Alice is 30 years old.

B undefined is undefined years old.

C Error: Property 'name' does not exist on type 'Person'.

D Alice is undefined years old.

💡 Hint

Check how the constructor assigns the parameters to the class properties.

The constructor correctly assigns the name and age parameters to the class properties. So logging them outputs the expected string.

❓ Predict Output

intermediate

What error occurs with this constructor parameter type mismatch?

What error will TypeScript show for this class when trying to create an instance?

Typescript

class Car {
  model: string;
  year: number;
  constructor(model: string, year: number) {
    this.model = model;
    this.year = year;
  }
}
const c = new Car('Tesla', '2020');

A Property 'year' is missing in type 'string'.

B No error, instance created successfully.

C Type 'string' is not assignable to type 'number'.

D SyntaxError: Unexpected string.

💡 Hint

Look at the type of the second argument passed to the constructor.

The constructor expects year to be a number, but a string is passed. TypeScript reports a type mismatch error.

🔧 Debug

advanced

Why does this constructor cause a runtime error?

Examine the class and its constructor. Why does this code cause a runtime error?

Typescript

class Rectangle {
  width: number;
  height: number;
  constructor(width: number, height: number) {
    this.width = width;
    // Forgot to assign height
  }
  area() {
    return this.width * this.height;
  }
}
const r = new Rectangle(5, 10);
console.log(r.area());

A Output: NaN

B Output: 50

C Runtime error: Cannot read property 'height' of undefined.

D SyntaxError: Missing assignment in constructor.

💡 Hint

Check if all properties are initialized before use.

The height property is never assigned a value, so it is undefined. Multiplying a number by undefined results in NaN.

📝 Syntax

advanced

Which constructor syntax is correct for parameter properties?

Which option correctly uses TypeScript's parameter properties to declare and initialize class members in the constructor?

A

class Point {
  constructor(x: number, y: number) {
    this.x: number = x;
    this.y: number = y;
  }
}

B

class Point {
  constructor(x: number, y: number) {
    public this.x = x;
    private this.y = y;
  }
}

C

class Point {
  constructor(public x: number, y: number) {
    this.y = y;
  }
}

D

class Point {
  constructor(public x: number, private y: number) {}
}

💡 Hint

Parameter properties combine declaration and assignment in the constructor parameters.

Option D correctly declares x and y as class members with access modifiers in the constructor parameters. Other options have syntax errors or misuse.

🚀 Application

expert

How many properties does this class instance have after construction?

Given this TypeScript class using parameter properties and explicit members, how many own properties will an instance have?

Typescript

class User {
  id: number;
  constructor(public name: string, id: number) {
    this.id = id;
  }
}
const u = new User('Bob', 42);
console.log(Object.keys(u).length);

A 1

B 2

C 0

D 3

💡 Hint

Parameter properties create class members that are own properties. Explicit assignments also create own properties.

The instance u has two own properties: name (from parameter property) and id (assigned in constructor). So Object.keys(u).length is 2.