Super keyword behavior in Typescript - Mini Project: Build & Apply

Super keyword behavior

📖 Scenario: Imagine you are creating a simple system to manage vehicles. You want to reuse some code from a basic vehicle class in a more specific car class. This helps avoid repeating code and keeps things organized.

🎯 Goal: You will build two classes: Vehicle and Car. The Car class will use the super keyword to call the constructor and methods of the Vehicle class. This shows how super helps reuse and extend code.

📋 What You'll Learn

Create a class called Vehicle with a constructor that takes a make string and a method describe() that returns a description string.

Create a class called Car that extends Vehicle and has an additional property model.

Use super in the Car constructor to call the Vehicle constructor.

Override the describe() method in Car and use super.describe() inside it.

Create an instance of Car and print the result of its describe() method.

💡 Why This Matters

🌍 Real World

Using <code>super</code> is common when building software with related objects, like vehicles, employees, or products, to avoid repeating code.

💼 Career

Understanding <code>super</code> and class inheritance is essential for many programming jobs, especially in frontend and backend development using TypeScript or JavaScript.

1

Create the Vehicle class

Create a class called Vehicle with a constructor that takes a make string and stores it in a public property called make. Add a method called describe() that returns the string `This vehicle is a ${this.make}`.

Typescript

# Your code here

Hint

Remember to use this.make = make inside the constructor to save the value.

2

Create the Car class with super constructor call

Create a class called Car that extends Vehicle. Add a constructor that takes make and model strings. Use super(make) to call the Vehicle constructor. Store model in a public property called model.

Typescript

class Vehicle {
    public make: string;
    constructor(make: string) {
        this.make = make;
    }
    describe(): string {
        return `This vehicle is a ${this.make}`;
    }
}

# Your code here

Hint

Use super(make) inside the Car constructor to call the parent constructor.

3

Override describe() method in Car using super

In the Car class, override the describe() method. Inside it, call super.describe() and add the model information to return a string like `This vehicle is a ${this.make} and the model is ${this.model}`.

Typescript

class Vehicle {
    public make: string;
    constructor(make: string) {
        this.make = make;
    }
    describe(): string {
        return `This vehicle is a ${this.make}`;
    }
}

class Car extends Vehicle {
    public model: string;
    constructor(make: string, model: string) {
        super(make);
        this.model = model;
    }
    
    # Your code here
}

Hint

Use super.describe() inside the new describe() method to reuse the parent class message.

4

Create Car instance and print description

Create a variable called myCar and assign it a new Car object with make as 'Toyota' and model as 'Corolla'. Then print the result of myCar.describe().

Typescript

class Vehicle {
    public make: string;
    constructor(make: string) {
        this.make = make;
    }
    describe(): string {
        return `This vehicle is a ${this.make}`;
    }
}

class Car extends Vehicle {
    public model: string;
    constructor(make: string, model: string) {
        super(make);
        this.model = model;
    }
    describe(): string {
        return `${super.describe()} and the model is ${this.model}`;
    }
}

# Your code here

Hint

Use console.log(myCar.describe()) to print the description.

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