Super keyword behavior in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of super method call in subclass

What is the output of this TypeScript code when the greet method is called on an instance of Child?

Typescript

class Parent {
  greet() {
    return "Hello from Parent";
  }
}

class Child extends Parent {
  greet() {
    return super.greet() + " and Child";
  }
}

const c = new Child();
console.log(c.greet());

A "Hello from Parent and Child"

B "Hello from Child"

C "Hello from Parent"

D TypeError: super.greet is not a function

💡 Hint

Remember that super calls the method from the parent class.

The Child class overrides greet but calls super.greet() to get the parent's greeting, then adds its own text. So the output combines both strings.

❓ Predict Output

intermediate

Using super in constructor

What will be logged when creating an instance of Child?

Typescript

class Parent {
  name: string;
  constructor(name: string) {
    this.name = name;
    console.log('Parent constructor: ' + this.name);
  }
}

class Child extends Parent {
  constructor(name: string) {
    super(name);
    console.log('Child constructor: ' + this.name);
  }
}

const c = new Child('Alice');

A Parent constructor: Alice\nChild constructor: Alice

B Child constructor: Alice\nParent constructor: Alice

C Parent constructor: undefined\nChild constructor: Alice

D ReferenceError: Must call super constructor before accessing 'this'

💡 Hint

The parent constructor runs first and sets the name.

The Child constructor calls super(name) first, which runs the Parent constructor and logs the parent's message. Then the child's message is logged.

❓ Predict Output

advanced

super in arrow function method

What is the output of this code when child.method() is called?

Typescript

class Parent {
  method() {
    return 'Parent method';
  }
}

class Child extends Parent {
  method = () => {
    return super.method();
  };
}

const child = new Child();
console.log(child.method());

A "Parent method"

B "Child method"

C TypeError: super.method is not a function

D SyntaxError: 'super' keyword unexpected here

💡 Hint

Arrow functions do not have their own super binding.

Using super inside an arrow function property causes a syntax error because arrow functions do not have their own super context.

❓ Predict Output

advanced

super in getter and setter

What will be the output of this code snippet?

Typescript

class Parent {
  private _value = 10;
  get value() {
    return this._value;
  }
  set value(val: number) {
    this._value = val;
  }
}

class Child extends Parent {
  get value() {
    return super.value * 2;
  }
  set value(val: number) {
    super.value = val / 2;
  }
}

const c = new Child();
c.value = 40;
console.log(c.value);

A 80

B 40

C 20

D TypeError: Cannot set property 'value' of undefined

💡 Hint

Setter divides by 2, getter multiplies by 2.

The Child setter divides 40 by 2 and sets 20 in the parent. The Child getter returns 20 * 2 = 40.

🧠 Conceptual

expert

Behavior of super in multiple inheritance via mixins

Consider the following TypeScript code using mixins. What will be the output when obj.method() is called?

Typescript

class Base {
  method() {
    return 'Base';
  }
}

function Mixin1<T extends new (...args: any[]) => {}>(BaseClass: T) {
  return class extends BaseClass {
    method() {
      return 'Mixin1 -> ' + super.method();
    }
  };
}

function Mixin2<T extends new (...args: any[]) => {}>(BaseClass: T) {
  return class extends BaseClass {
    method() {
      return 'Mixin2 -> ' + super.method();
    }
  };
}

class Combined extends Mixin1(Mixin2(Base)) {}
const obj = new Combined();
console.log(obj.method());

A "Base"

B "Mixin2 -> Mixin1 -> Base"

C "Mixin1 -> Mixin2 -> Base"

D TypeError: super.method is not a function

💡 Hint

Mixins wrap classes inside each other, so the outermost calls super of the inner.

The class Combined extends Mixin1 applied to Mixin2(Base). So method in Mixin1 calls super.method() which is Mixin2's method, which calls Base's method. The output chains accordingly.

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