Why inheritance needs types in Typescript - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a class that inherits from another class.

Typescript

class Animal {
  speak() {
    console.log('Animal speaks');
  }
}

class Dog extends [1] {
  speak() {
    console.log('Dog barks');
  }
}

Drag options to blanks, or click blank then click option'

ASpeak

BDog

CObject

DAnimal

Attempts:

3 left

💡 Hint

Common Mistakes

Using the child class name after 'extends' instead of the parent class.

Forgetting to use 'extends' keyword.

The class Dog inherits from the class Animal using the 'extends' keyword followed by the parent class name.

2fill in blank

medium

Complete the code to specify the type of the parameter in the constructor of the subclass.

Typescript

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

class Employee extends Person {
  constructor(name: [1]) {
    super(name);
  }
}

Drag options to blanks, or click blank then click option'

Anumber

Bboolean

Cstring

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different type than the parent class parameter.

Omitting the type annotation.

The parameter 'name' should be of type 'string' to match the parent class constructor.

3fill in blank

hard

Fix the error in the method override by specifying the correct return type.

Typescript

class Shape {
  area(): number {
    return 0;
  }
}

class Circle extends Shape {
  area(): [1] {
    return Math.PI * 5 * 5;
  }
}

Drag options to blanks, or click blank then click option'

Anumber

Bvoid

Cstring

Dboolean

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'void' or 'string' as return type which causes type errors.

Omitting the return type.

The method 'area' returns a number, so the return type must be 'number' to match the parent method.

4fill in blank

hard

Fill both blanks to declare a class with a typed property and constructor parameter.

Typescript

class Vehicle {
  wheels: [1];
  constructor(wheels: [2]) {
    this.wheels = wheels;
  }
}

Drag options to blanks, or click blank then click option'

Anumber

Bstring

Cboolean

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using different types for property and parameter.

Using non-numeric types like string or boolean.

The property 'wheels' and its constructor parameter should both be of type 'number'.

5fill in blank

hard

Fill all three blanks to create a method with correct parameter and return types.

Typescript

class Calculator {
  add(a: [1], b: [2]): [3] {
    return a + b;
  }
}

Drag options to blanks, or click blank then click option'

Astring

Bnumber

Cboolean

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'string' or 'boolean' types which cause errors.

Mismatching parameter and return types.

The add method takes two numbers and returns a number, so all types should be 'number'.

Practice

1. Why do we need types when using inheritance in TypeScript?

easy

A. To ensure the child class follows the structure of the parent class

B. To make the code run faster

C. To allow multiple inheritance

D. To avoid writing constructors

Solution

1. Step 1: Understand inheritance purpose

   Inheritance allows a child class to reuse code from a parent class.

2. Step 2: Role of types in inheritance

   Types ensure the child class matches the parent's structure, preventing mistakes.

3. Final Answer:

   To ensure the child class follows the structure of the parent class -> Option A

4. Quick Check:

   Types keep inheritance safe = A [OK]

Hint: Types keep child classes consistent with parents [OK]

Common Mistakes:

• Thinking types speed up code execution
• Confusing inheritance with multiple inheritance
• Believing constructors are avoided by types

2. Which of the following is the correct way to declare a class Dog that inherits from class Animal in TypeScript?

easy

A. class Dog Animal {}

B. class Dog inherits Animal {}

C. class Dog : Animal {}

D. class Dog extends Animal {}

Solution

1. Step 1: Recall TypeScript inheritance syntax

   TypeScript uses the keyword extends to inherit from a class.

2. Step 2: Check each option

   Only class Dog extends Animal {} uses extends correctly; others use invalid syntax.

3. Final Answer:

   class Dog extends Animal {} -> Option D

4. Quick Check:

   Inheritance uses 'extends' keyword = A [OK]

Hint: Remember: 'extends' keyword for class inheritance [OK]

Common Mistakes:

• Using 'inherits' instead of 'extends'
• Using ':' like other languages (e.g., C#)
• Omitting 'extends' keyword

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

class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  speak() {
    return `${this.name} makes a sound.`;
  }
}

class Dog extends Animal {
  speak() {
    return `${this.name} barks.`;
  }
}

const dog = new Dog('Buddy');
console.log(dog.speak());

medium

A. Buddy makes a sound.

B. Buddy barks.

C. Error: speak method missing

D. undefined barks.

Solution

1. Step 1: Understand class inheritance and method overriding

   Dog inherits from Animal and overrides the speak() method.

2. Step 2: Check the output of dog.speak()

   dog.speak() calls Dog's speak(), returning 'Buddy barks.'

3. Final Answer:

   Buddy barks. -> Option B

4. Quick Check:

   Overridden method runs = D [OK]

Hint: Overridden methods in child class run, not parent's [OK]

Common Mistakes:

• Expecting parent method output
• Thinking speak method is missing
• Assuming name is undefined

4. Identify the error in this TypeScript code:

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

class Dog extends Animal {
  constructor() {
    super();
  }
}

medium

A. Missing argument in super() call

B. Dog class cannot have a constructor

C. name property should be private

D. super() should be called after this.name assignment

Solution

1. Step 1: Check Animal constructor parameters

   Animal's constructor requires a string argument name.

2. Step 2: Check Dog constructor call to super()

   Dog calls super() without arguments, causing an error.

3. Final Answer:

   Missing argument in super() call -> Option A

4. Quick Check:

   super() needs required parameters = B [OK]

Hint: super() must get all required parent constructor args [OK]

Common Mistakes:

• Calling super() without arguments when parent needs them
• Thinking child class can't have constructor
• Confusing property access modifiers

5. You want to create a class Rectangle that inherits from Shape. The Shape class requires a color string property. How should you define the Rectangle constructor to properly use inheritance and types in TypeScript?

hard

A. constructor(color: string) { this.color = color; }

B. constructor(width: number, height: number) { this.width = width; this.height = height; }

C. constructor(color: string, width: number, height: number) { super(color); this.width = width; this.height = height; }

D. constructor() { super(); this.width = 0; this.height = 0; }

Solution

1. Step 1: Understand parent constructor requirements

   Shape requires a color string in its constructor.

2. Step 2: Define Rectangle constructor with all needed parameters

   Rectangle must accept color and pass it to super(color), plus its own properties.

3. Step 3: Check options for correct super call and property assignments

   Only constructor(color: string, width: number, height: number) { super(color); this.width = width; this.height = height; } correctly calls super(color) and assigns width and height.

4. Final Answer:

   constructor(color: string, width: number, height: number) { super(color); this.width = width; this.height = height; } -> Option C

5. Quick Check:

   Pass parent args via super() = C [OK]

Hint: Pass all parent constructor args to super() in child constructor [OK]

Common Mistakes:

• Omitting super() call or its arguments
• Assigning parent properties directly without super()
• Missing child class properties in constructor