Working with TypeScript: Overriding a Parent Constructor

Question

Working with TypeScript: Overriding a Parent Constructor

I am new to TypeScript and currently learning about Classes. I have a question regarding extending parent classes:

When we use the extends keyword to inherit from a parent class, we are required to call the super() method in the child class constructor. However, what if I want to skip the parent constructor or override it?

class Base {
  name: string;
  constructor() {
    name = 'based'
    console.log("Do not display this");
  }
}
 
class Derived extends Base {
  name = "derived";
  constructor(){
    super()
    console.log("My name is " + this.name);
  }
}

const d = new Derived();

[LOG]: "Do not display this"

[LOG]: "My name is derived"

typescript

Answer 1

Answer №1

Is it possible to skip the parent constructor or override it?

No, you cannot skip the parent constructor. In fact, constructors for derived classes must include a super call.

However, you can structure your base class in a way that allows for controlling the execution of the constructor based on arguments:

TS Playground

class Base {
  name = 'base';

  constructor (runOptionalCodePath = true) {
    if (runOptionalCodePath) {
      console.log('Dont show that');
    }
  }
}

class Derived extends Base {
  override name = 'derived';

  constructor () {
    super(false);
    console.log(`My name is ${this.name}`);
  }
}

new Derived(); // "My name is derived"
new Base(); // "Dont show that"

Answer 2

Is it possible to skip the parent constructor or override it?

No, you cannot skip the parent constructor. In fact, constructors for derived classes must include a super call.

However, you can structure your base class in a way that allows for controlling the execution of the constructor based on arguments:

TS Playground

class Base {
  name = 'base';

  constructor (runOptionalCodePath = true) {
    if (runOptionalCodePath) {
      console.log('Dont show that');
    }
  }
}

class Derived extends Base {
  override name = 'derived';

  constructor () {
    super(false);
    console.log(`My name is ${this.name}`);
  }
}

new Derived(); // "My name is derived"
new Base(); // "Dont show that"

Working with TypeScript: Overriding a Parent Constructor

Answer №1

Similar questions

Is there a counterpart to ES6 "Sets" in TypeScript?

The data type 'boolean' cannot be assigned to the type 'CaseReducer<ReportedCasesState, { payload: any; type: string; }>'

Unable to set value using React Hook Form for Material-UI Autocomplete is not functioning

Developing Angular dynamic components recursively can enhance the flexibility and inter

Zod data structure featuring optional fields

Tips on transferring information to the graphical user interface

What could be causing TypeScript to throw errors regarding the initialState type when defining redux slices with createSlice in reduxToolkit, despite it being the correct type specified?

Converting an array of objects to an array based on an interface

I am looking to implement tab navigation for page switching in my project, which is built with react-redux and react-router

Is it possible for a button to be assigned to a variable upon creation, but encounter an error when trying to

The issue of HTTP parameters not being appended to the GET request was discovered

Why isn't the customer's name a part of the CFCustomerDetails class?

What is the best way to delete previously entered characters in the "confirm password" field after editing the password

How can one interpret the act of "passing" an interface to an RxJS Store using angle brackets?

Next.js is having trouble identifying the module '@types/react'

Strategies for implementing searchbar filtering in Ionic3 and Angular5 data manipulation

Tips for avoiding the transmission of className and style attributes to React components

In Angular, dynamically updating ApexCharts series daily for real-time data visualization

Chai expect() in Typescript to Validate a Specific Type

Issues with loading NextJS/Ant-design styles and JS bundles are causing delays in the staging environment