Super keyword behavior in Typescript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the super keyword do in TypeScript classes?

The super keyword is used to call functions on an object's parent class. It allows access to the parent class's constructor and methods.

beginner

When must you call <code>super()</code> in a derived class constructor?

You must call <code>super()</code> before using <code>this</code> in a derived class constructor. This ensures the parent class is properly initialized first.

intermediate

How do you use <code>super</code> to call a parent class method that is overridden?

Inside the child class method, use <code>super.methodName()</code> to call the parent class's version of the method.

intermediate

Can <code>super</code> be used outside of class methods or constructors?

No, <code>super</code> can only be used inside class constructors or methods to refer to the parent class. Using it outside causes errors.

beginner

What happens if you forget to call <code>super()</code> in a derived class constructor?

TypeScript will throw an error because the parent class constructor must be called before accessing <code>this</code>. This prevents incomplete initialization.

What is the purpose of the super() call in a derived class constructor?

A To override a method

B To create a new instance of the child class

C To call a static method

D To initialize the parent class before using <code>this</code>

The super() call initializes the parent class, which must happen before using this in the derived class constructor.

How do you call a parent class method named greet from a child class?

A <code>super.greet()</code>

B <code>this.greet()</code>

C <code>parent.greet()</code>

D <code>greet.super()</code>

Use super.greet() inside the child class method to call the parent class's greet method.

Can you use super outside of a class method or constructor?

A Yes, anywhere in the code

B No, only inside class methods or constructors

C Only inside static methods

D Only inside arrow functions

super is only valid inside class constructors or methods to access the parent class.

What error occurs if you use this before super() in a derived class constructor?

A ReferenceError

B SyntaxError

C TypeError

D No error

Using this before calling super() causes a ReferenceError because the parent class is not initialized yet.

Which statement about super is true?

A <code>super</code> is a variable holding the parent class

B <code>super</code> creates a new instance of the parent class

C <code>super</code> can be used to access parent class properties and methods

D <code>super</code> can be used in any function

super is used to access the parent class's properties and methods from a child class.

Explain how and why you use the super keyword in a TypeScript class constructor.

Think about what happens when you create a child class object.

Describe how to call a parent class method from a child class when the method is overridden.

How do you reach back to the original method?

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