Super keyword behavior in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to call the parent class constructor using super.

Typescript

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

class Dog extends Animal {
  constructor(name: string) {
    [1](name);
  }
}

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

Asuper

Bthis

Cparent

Dbase

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'this' instead of 'super' to call the parent constructor.

Using 'parent' or 'base' which are not valid keywords in TypeScript.

In TypeScript, super is used to call the parent class constructor.

2fill in blank

medium

Complete the method to call the parent class method using super.

Typescript

class Animal {
  speak() {
    return "Animal sound";
  }
}

class Dog extends Animal {
  speak() {
    return [1].speak() + " and Bark";
  }
}

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

Asuper

Bparent

Cthis

Dbase

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'this' instead of 'super' to call the parent method.

Using invalid keywords like 'parent' or 'base'.

Use super.methodName() to call a method from the parent class.

3fill in blank

hard

Fix the error by completing the constructor to properly call super before using this.

Typescript

class Person {
  constructor(public name: string) {}
}

class Employee extends Person {
  constructor(name: string, public id: number) {
    [1](name);
    this.id = id;
  }
}

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

Athis

Bbase

Cparent

Dsuper

Attempts:

3 left

💡 Hint

Common Mistakes

Calling 'this' before 'super' in the constructor.

Using invalid keywords like 'parent' or 'base'.

In derived classes, you must call super() before accessing this.

4fill in blank

hard

Fill both blanks to override a method and call the parent method using super.

Typescript

class Vehicle {
  move() {
    return "Moving";
  }
}

class Car extends Vehicle {
  move() {
    return [1].move() [2] " fast";
  }
}

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

Asuper

B+

C-

D*

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong operators like '-' or '*' for string concatenation.

Not using 'super' to call the parent method.

Use super.move() to call the parent method and + to join strings.

5fill in blank

hard

Fill all three blanks to override a method, call the parent method, and add extra text.

Typescript

class Printer {
  print() {
    return "Printing";
  }
}

class ColorPrinter extends Printer {
  print() {
    return [1].print() [2] " in color" [3] "!";
  }
}

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

Asuper

B+

C*

D-

Attempts:

3 left

💡 Hint

Common Mistakes

Using '*' or '-' instead of '+' for string concatenation.

Not calling the parent method with 'super'.

Use super.print() to call the parent method and + to join strings.

Practice

1.

What does the super keyword do in TypeScript classes?

easy

A. It defines a static method inside a class.

B. It creates a new instance of the child class.

C. It allows a child class to access and call methods or constructors from its parent class.

D. It declares a private property in the class.

Solution

1. Step 1: Understand the role of super

   The super keyword is used in child classes to refer to their parent class.

2. Step 2: Identify what super accesses

   It allows calling the parent class constructor or methods from the child class.

3. Final Answer:

   It allows a child class to access and call methods or constructors from its parent class. -> Option C

4. Quick Check:

   super accesses parent features = A [OK]

Hint: Remember: super connects child to parent class features [OK]

Common Mistakes:

• Thinking super creates new instances
• Confusing super with static method declaration
• Assuming super declares properties

2.

Which of the following is the correct way to call a parent class constructor inside a child class constructor?

class Parent { constructor(name: string) {} } 
class Child extends Parent { 
  constructor(name: string) { 
    ? 
  } 
}

easy

A. super(name);

B. this.super(name);

C. Parent(name);

D. super.constructor(name);

Solution

1. Step 1: Recall syntax for calling parent constructor

   In TypeScript, inside a child constructor, super() calls the parent constructor.

2. Step 2: Match correct syntax

   The correct call is super(name); to pass the argument to the parent.

3. Final Answer:

   super(name); -> Option A

4. Quick Check:

   Parent constructor call = super(name) [OK]

Hint: Use super(args) to call parent constructor inside child [OK]

Common Mistakes:

• Using this.super() which is invalid
• Calling parent class name like a function
• Trying super.constructor() which is incorrect

3.

What will be the output of the following TypeScript code?

class Animal {
  speak() { return 'Animal sound'; }
}
class Dog extends Animal {
  speak() { return super.speak() + ' and Bark'; }
}
const dog = new Dog();
console.log(dog.speak());

medium

A. "Animal sound"

B. "Bark"

C. Runtime error

D. "Animal sound and Bark"

Solution

1. Step 1: Understand method overriding and super

   The Dog class overrides speak() and calls super.speak() to get the parent method's return.

2. Step 2: Combine parent and child method outputs

   super.speak() returns "Animal sound", then " and Bark" is added.

3. Final Answer:

   "Animal sound and Bark" -> Option D

4. Quick Check:

   super method call adds parent output = D [OK]

Hint: super.method() adds parent method result inside child override [OK]

Common Mistakes:

• Expecting only 'Bark' without parent sound
• Thinking it causes an error
• Ignoring super call inside method

4.

Identify the error in this TypeScript code snippet:

class Base {
  constructor() { console.log('Base constructor'); }
}
class Derived extends Base {
  constructor() {
    console.log('Derived constructor');
    super();
  }
}

medium

A. Missing call to super() before using this or other statements.

B. Calling super() after a statement in constructor causes error.

C. The super() call is correct and no error occurs.

D. The Derived class must not have a constructor.

Solution

1. Step 1: Recall constructor rules in derived classes

   In TypeScript, super() must be called before any other statement in a derived class constructor.

2. Step 2: Identify the error in code order

   The code calls console.log before super(), which is invalid and causes a runtime error.

3. Final Answer:

   Calling super() after a statement in constructor causes error. -> Option B

4. Quick Check:

   super() must be first in constructor [OK]

Hint: Always call super() first in child constructor [OK]

Common Mistakes:

• Calling super() after other code
• Thinking super() can be omitted
• Assuming no error if super() is late

5.

Given the following classes, what will console.log(new C().getValue()); print?

class A {
  value = 1;
  getValue() { return this.value; }
}
class B extends A {
  value = 2;
  getValue() { return super.getValue() + this.value; }
}
class C extends B {
  value = 3;
  getValue() { return super.getValue() + this.value; }
}

hard

A. 9

B. 3

C. 6

D. 5

Solution

1. Step 1: Evaluate C.getValue() call

   C.getValue() calls super.getValue() (which is B.getValue()) plus this.value (3).

2. Step 2: Evaluate B.getValue() call

   B.getValue() calls super.getValue() (which is A.getValue()) plus this.value (3, because this is instance of C).

3. Step 3: Evaluate A.getValue() call

   A.getValue() returns this.value, which is 3 (from C instance).

4. Step 4: Calculate total

   So, A.getValue() = 3, B.getValue() = 3 + 3 = 6, C.getValue() = 6 + 3 = 9.

5. Step 5: Reconsider value property shadowing

   However, each class defines its own value property. But this.value always refers to C's value (3) because this is the instance of C.

6. Final Answer:

   9 -> Option A

7. Quick Check:

   super calls chain add values = 9 [OK]

Hint: Remember this refers to child instance, not parent [OK]

Common Mistakes:

• Assuming this.value changes in each class
• Ignoring this binding to child instance
• Adding only parent values without child