Extending classes with types in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this TypeScript code extending a class with a generic type?

Consider the following TypeScript code where a class Box is extended by ColoredBox with a generic type. What will be printed when the code runs?

Typescript

class Box<T> {
  content: T;
  constructor(content: T) {
    this.content = content;
  }
  getContent(): T {
    return this.content;
  }
}

class ColoredBox<T> extends Box<T> {
  color: string;
  constructor(content: T, color: string) {
    super(content);
    this.color = color;
  }
  describe(): string {
    return `Box of color ${this.color} containing: ${this.content}`;
  }
}

const box = new ColoredBox<number>(42, "red");
console.log(box.describe());

A Box of color red containing: 42

B TypeError at runtime

C Box of color undefined containing: 42

D Box of color red containing: [object Object]

💡 Hint

Look at how the ColoredBox class calls super(content) and how content is used in the describe method.

The ColoredBox class extends Box and passes the content to the parent constructor. The describe method uses the color property and the content property inherited from Box. Since content is a number (42), it prints correctly.

❓ Predict Output

intermediate

What is the value of result after running this TypeScript code with class extension and type constraints?

Given the following TypeScript code, what is the value of result after execution?

Typescript

class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

class Dog extends Animal {
  breed: string;
  constructor(name: string, breed: string) {
    super(name);
    this.breed = breed;
  }
}

function getAnimalName<T extends Animal>(animal: T): string {
  return animal.name;
}

const dog = new Dog("Buddy", "Beagle");
const result = getAnimalName(dog);

A undefined

B "Beagle"

C "Buddy"

D TypeError at runtime

💡 Hint

Remember that getAnimalName returns the name property from the Animal class.

The Dog class extends Animal and inherits the name property. The function getAnimalName accepts any Animal or subclass and returns the name. So it returns "Buddy".

🔧 Debug

advanced

What error does this TypeScript code produce when extending a class with a type mismatch?

Examine the following TypeScript code. What error will the TypeScript compiler report?

Typescript

class Container<T> {
  value: T;
  constructor(value: T) {
    this.value = value;
  }
}

class NumberContainer extends Container<number> {
  constructor(value: string) {
    super(value);
  }
}

const numCont = new NumberContainer("123");

A No error, code compiles successfully.

B Argument of type 'string' is not assignable to parameter of type 'number'.

C Property 'value' does not exist on type 'NumberContainer'.

D Type 'NumberContainer' is not assignable to type 'Container<number>'.

💡 Hint

Check the constructor parameter types and what is passed to super().

The NumberContainer class extends Container with number as the type. Its constructor takes a string but passes it to super which expects a number. This causes a type error.

📝 Syntax

advanced

Which option correctly extends a generic class with an additional property in TypeScript?

Choose the correct TypeScript code that extends a generic class Pair<T, U> by adding a new property label of type string.

A

class LabeledPair<T, U> extends Pair<T, U> {
  label: string;
  constructor(first: T, second: U, label: number) {
    super(first, second);
    this.label = label;
  }
}

B

class LabeledPair<T, U> extends Pair<T, U> {
  label: string;
  constructor(label: string) {
    super();
    this.label = label;
  }
}

C

class LabeledPair<T, U> extends Pair<T, U> {
  label: string;
  constructor(first: T, second: U) {
    super(first, second);
    this.label = label;
  }
}

D

class LabeledPair<T, U> extends Pair<T, U> {
  label: string;
  constructor(first: T, second: U, label: string) {
    super(first, second);
    this.label = label;
  }
}

💡 Hint

Check the constructor parameters and types carefully, especially the label property type.

Option D correctly extends Pair with generic parameters T and U, adds a label property of type string, and passes the correct parameters to super. Other options have missing or wrong parameters or type mismatches.

🚀 Application

expert

How many properties does an instance of this extended class have at runtime?

Given the following TypeScript code, how many own properties does the instance obj have at runtime?

Typescript

class Base<T> {
  data: T;
  constructor(data: T) {
    this.data = data;
  }
}

class Extended extends Base<number> {
  extra: string;
  constructor(data: number, extra: string) {
    super(data);
    this.extra = extra;
  }
}

const obj = new Extended(10, "hello");

A 2

B 1

C 0

D 3

💡 Hint

Count the properties assigned directly on the instance in the constructors.

The instance obj has two own properties: data from Base and extra from Extended. Both are assigned in their respective constructors, so the count is 2.