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.

Practice

1. What does the extends keyword do in TypeScript class definitions?

easy

A. It imports a module into the class.

B. It defines a new interface for a class.

C. It creates a new class that inherits properties and methods from an existing class.

D. It declares a variable inside a class.

Solution

1. Step 1: Understand the role of extends

   The extends keyword is used to create a new class that inherits from an existing class, gaining its properties and methods.

2. Step 2: Differentiate from other keywords

   Other options describe unrelated concepts: interfaces, variables, or modules, which are not what extends does.

3. Final Answer:

   It creates a new class that inherits properties and methods from an existing class. -> Option C

4. Quick Check:

   extends means inheritance [OK]

Hint: Remember: extends means 'is a' relationship in classes [OK]

Common Mistakes:

• Confusing extends with interface implementation
• Thinking extends imports modules
• Using extends to declare variables

2. Which of the following is the correct syntax to extend a class named Animal in TypeScript?

easy

A. class Dog extends Animal {}

B. class Dog inherits Animal {}

C. class Dog implements Animal {}

D. class Dog import Animal {}

Solution

1. Step 1: Recall correct syntax for class extension

   In TypeScript, the keyword to extend a class is extends, so the syntax is class Dog extends Animal {}.

2. Step 2: Identify incorrect options

   inherits is not a TypeScript keyword, implements is for interfaces, and import is for modules.

3. Final Answer:

   class Dog extends Animal {} -> Option A

4. Quick Check:

   Use extends to inherit classes [OK]

Hint: Use 'extends' keyword to inherit classes, not 'inherits' or 'implements' [OK]

Common Mistakes:

• Using 'inherits' instead of 'extends'
• Confusing 'implements' with 'extends'
• Trying to import classes inside class declaration

3. What will be the output of this TypeScript code?

class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  greet() {
    return `Hello, ${this.name}`;
  }
}

class Student extends Person {
  constructor(name: string) {
    super(name);
  }
}

const s = new Student('Anna');
console.log(s.greet());

medium

A. Hello, undefined

B. Hello, Anna

C. Error: super() not called

D. Hello, Student

Solution

1. Step 1: Understand class inheritance and constructor call

   The Student class extends Person and calls super(name) in its constructor, so the name property is set correctly.

2. Step 2: Check method call and output

   Calling s.greet() uses the inherited method, which returns Hello, Anna.

3. Final Answer:

   Hello, Anna -> Option B

4. Quick Check:

   super() sets parent properties correctly [OK]

Hint: Always call super() in child constructor to set parent properties [OK]

Common Mistakes:

• Forgetting to call super() causes errors
• Expecting child's own greet method without override
• Assuming name is undefined without super()

4. Identify the error in this TypeScript code:

class Vehicle {
  wheels: number;
  constructor(wheels: number) {
    this.wheels = wheels;
  }
}

class Car extends Vehicle {
  constructor() {
    this.wheels = 4;
  }
}

medium

A. Missing call to super() in Car constructor

B. Cannot assign number to wheels property

C. Class Car should not extend Vehicle

D. Constructor syntax is incorrect

Solution

1. Step 1: Check constructor in subclass

   The Car class constructor assigns this.wheels = 4 but does not call super(), which is required before using this.

2. Step 2: Understand TypeScript rules for subclass constructors

   In TypeScript, a subclass constructor must call super() before accessing this. Missing this causes a compile error.

3. Final Answer:

   Missing call to super() in Car constructor -> Option A

4. Quick Check:

   Always call super() before this in subclass constructor [OK]

Hint: Call super() first in subclass constructor before using this [OK]

Common Mistakes:

• Assigning to this before super() call
• Forgetting super() call causes runtime error
• Thinking super() is optional in subclass constructor

5. Given these classes, how can you extend Employee to add a department property and keep the name property from Person?

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

class Employee extends Person {
  // Add department property here
}

hard

A. class Employee extends Person {
department: string;
constructor(name: string, department: string) {
this.department = department;
}
}

B. class Employee extends Person {
department: string;
constructor(department: string) {
this.department = department;
}
}

C. class Employee extends Person {
department: string;
constructor(name: string) {
super(name);
}
}

D. class Employee extends Person {
department: string;
constructor(name: string, department: string) {
super(name);
this.department = department;
}
}

Solution

1. Step 1: Add department property and constructor parameters

   To add department, declare it and add it as a parameter in the constructor along with name.

2. Step 2: Call super(name) and assign department

   Call super(name) to set the inherited name property, then assign this.department = department.

3. Final Answer:

   class Employee extends Person { department: string; constructor(name: string, department: string) { super(name); this.department = department; } } -> Option D

4. Quick Check:

   Use super() for parent props and assign new props in constructor [OK]

Hint: Call super(name) then assign new properties in constructor [OK]

Common Mistakes:

• Not calling super() in constructor
• Missing department parameter in constructor
• Assigning this.department before super() call