Merging classes with interfaces in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of merged class and interface properties

What is the output of this TypeScript code when creating an instance of Person and accessing person.greet() and person.age?

Typescript

interface Person {
  age: number;
  greet(): string;
}

class Person {
  constructor(public age: number) {}
  greet() {
    return `Hello, I am ${this.age} years old.`;
  }
}

const person = new Person(30);
console.log(person.greet());
console.log(person.age);

A SyntaxError: Duplicate identifier 'Person'

B

"Hello, I am undefined years old."
undefined

C

"Hello, I am 30 years old."
30

D TypeError: person.greet is not a function

💡 Hint

Remember that in TypeScript, interfaces can merge with classes to add type information, but the class implementation defines the actual behavior.

The interface Person declares the shape with age and greet(). The class Person implements these members. When merged, the class provides the implementation and the interface provides the type. So, person.greet() returns the greeting string and person.age is 30.

❓ Predict Output

intermediate

Property count after merging class and interface

Given this TypeScript code, how many own properties does the employee object have after creation?

Typescript

interface Employee {
  id: number;
  department: string;
}

class Employee {
  constructor(public id: number) {}
  department = "Sales";
}

const employee = new Employee(101);
console.log(Object.keys(employee).length);

A 0

B 1

C Throws a runtime error

D 2

💡 Hint

Check which properties are assigned directly on the instance.

The class constructor assigns id as a public property, and department is initialized as a class field. Both become own properties of the employee object. So Object.keys(employee) returns ["id", "department"] which has length 2.

🔧 Debug

advanced

Why does this merged class and interface code cause an error?

This TypeScript code tries to merge a class and interface named Car. Why does it cause a compilation error?

Typescript

interface Car {
  speed: number;
  drive(): void;
}

class Car {
  speed: string;
  constructor(speed: string) {
    this.speed = speed;
  }
  drive() {
    console.log(`Driving at ${this.speed}`);
  }
}

A TypeScript error because interface and class have conflicting types for 'speed' property

B Runtime error because 'drive' method is missing

C Syntax error due to duplicate class declaration

D No error, code compiles and runs fine

💡 Hint

Check the types of the 'speed' property in both interface and class.

The interface Car declares speed as a number, but the class declares it as a string. This type conflict causes a TypeScript compilation error because merged declarations must be compatible.

📝 Syntax

advanced

Which option correctly merges a class and interface with method overloads?

You want to merge a class and interface named Calculator where the interface declares two overloads for calculate. Which option correctly compiles?

A

interface Calculator {
  calculate(x: number): number;
  calculate(x: string): string;
}
class Calculator {
  calculate(x: number): number {
    return x * 2;
  }
  calculate(x: string): string {
    return x + x;
  }
}

B

interface Calculator {
  calculate(x: number): number;
  calculate(x: string): string;
}
class Calculator {
  calculate(x: number | string): number | string {
    if (typeof x === 'number') return x * 2;
    else return x + x;
  }
}

C

interface Calculator {
  calculate(x: number): number;
  calculate(x: string): string;
}
class Calculator {
  calculate(x: any): any {
    if (typeof x === 'number') return x * 2;
    else return x + x;
  }
}

D

interface Calculator {
  calculate(x: number): number;
  calculate(x: string): string;
}
class Calculator {
  calculate(x: number | string): number {
    return x * 2;
  }
}

💡 Hint

In TypeScript, method overloads are declared in the interface, but the class must implement a single method with a compatible signature.

Option B correctly declares overloads in the interface and implements a single method in the class with a union type parameter and union return type. Option B tries to implement two methods with the same name, which is invalid. Option B lacks parameter types. Option B returns number but does not handle string input properly.

🚀 Application

expert

How many properties does this merged class/interface instance have?

Consider this TypeScript code merging a class and interface named Widget. After creating const w = new Widget();, how many own enumerable properties does w have?

Typescript

interface Widget {
  name: string;
  size: number;
  render(): void;
}

class Widget {
  name = "MyWidget";
  private size = 10;
  render() {
    console.log(`Rendering ${this.name}`);
  }
}

const w = new Widget();
console.log(Object.keys(w).length);

A 1

B 2

C 0

D 3

💡 Hint

Remember that private properties are not enumerable and do not appear in Object.keys output.

The class Widget has a public property name initialized as a class field, which is enumerable and own property. The size property is private and thus not enumerable. The method render is on the prototype, not an own property. So Object.keys(w) returns ["name"] with length 1.