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.