Is it possible to pass parameters from a base class's constructor to a child class?

I'm facing an issue with my base (generic) classes where the properties are initialized in the constructor. Whenever I try to extend these classes to create more specific ones, I find myself repeating the same parameters from the base class's constructor just to pass them to super. It feels ineffiecient to constantly duplicate these properties every time I extend the class. Is there a better way to handle this? Maybe some approach to automatically inherit the parent class's constructor parameters?

For instance, take a look at this code snippet - notice how in Programmer's constructor, I have to redundantly mention name, age, and height again only to pass them to super:

class Person {
    name: string;
    age: number;
    height: number;

    constructor(name: string, age: number, height: number) {
        this.name = name;
        this.age = age;
        this.height = height;
    }
}

class Programmer extends Person {
    languages: string[];

    constructor(name: string, age: number, height: number, languages: string[]) {
        super(name, age, height);

        this.languages = languages;
    }
}

Answer №1

If you can't directly inherit, you have the option to reference the parameter by utilizing ConstructorParameters and then spread them in your descendant constructor. Just remember that any new parameters should be added at the beginning:

class Animal {
    type: string;
    color: string;

    constructor(type: string, color: string) {
        this.type = type;
        this.color = color;
    }
}

class Dog extends Animal {
    breed: string[];

    constructor(breed: string[], ...a: ConstructorParameters<typeof Animal>) {
        super(...a);

        this.breed = breed;
    }
}

new Dog(["Golden Retriever"], "", "brown") // Since version 3.4, you will see actual parameter names in the IntelliSense instead of just ...a 

This approach may not be considered the ideal design. If dealing with a large number of parameters, it might be more beneficial to define an interface and pass that in instead. Alternatively, consider using a mapped type to extract relevant fields.

Answer №2

Since the base class Person requires parameters like name, age, and height for initialization, the extended class Programmer will also need these constructor arguments.

If you find yourself in a situation where there are multiple arguments needed, consider using a creation pattern such as the builder pattern to instantiate objects of the extended class.

To have a no-argument constructor, you can make the super constructor parameters optional.

class Person {
  name: string;
  age: number;
  height: number;

  constructor(name?: string, age?: number, height?: number) {
      this.name = name;
      this.age = age;
      this.height = height;
  }
}


class Programmer extends Person {
  languages: string[];

  constructor(languages: string[]) {
      super();

      this.languages = languages;
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for creating a unique Vee-Validate rule in TypeScript?

I am in the process of developing a unique VeeValidate rule for my VueJS component written in TypeScript. This rule is designed to validate two fields simultaneously, following the guidelines outlined in VeeValidate - Cross Field Validation. Here is a snip ...

Create a TypeScript declaration file for a JavaScript dependency that contains an exported function

I am currently utilizing a dependency called is-class in my TypeScript project. Unfortunately, this particular dependency does not come with a @types definition. As a workaround, I have been using a custom .d.ts file with declare module 'is-class&apos ...

Tips on expanding properties for Material-UI components with Typescript?

My goal is to enhance the props of the Button component from Material-UI using typescript in order to pass additional props to its children. import { NavLink } from 'react-router-dom'; import { Button } from 'material-ui'; <Button ...

Deleting a button from a list item or array in Angular 12

Having some trouble removing a list item with the click button, I've tried a few options but nothing seems to be working. Can anyone offer assistance? I need to remove a list item from my users array when clicked. Below is the Typescript code and cor ...

ReferenceError: 'exports' is undefined in the context of Typescript Jest

I'm currently delving into unit testing with jest and encountered an error that looks like this: > npm run unit > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="771f181012374659475947">[email protected]</ ...

Loading an external javascript file dynamically within an Angular component

Currently, I'm in the process of developing an Angular application with Angular 4 and CLI. One of my challenges is integrating the SkyScanner search widget into a specific component. For reference, you can check out this Skyscanner Widget Example. T ...

What is the process for creating a class in TypeScript?

Here is an example of the object structure I am working with: { "info" : { "title" : '123}, "details": [ {"desc": "d1"}, {"desc": "d2}] } I am currently in the process of defining ...

Unable to load content from Three.js Examples library (Error loading script for "three/examples/jsm/loaders/OBJLoader2")

In my Angular application, I have a simple setup using Three.js. When I try to import the `OBJLoader2` from `three/examples/jsm/loaders/OBJLoader2`, everything works fine except when running it with the `ts_devserver`. The browser console shows an error: G ...

What steps do I need to take to enable the about page functionality in the angular seed advance project?

After carefully following the instructions provided on this page https://github.com/NathanWalker/angular-seed-advanced#how-to-start, I successfully installed and ran everything. When running npm start, the index page loads with 'Loading...' I ha ...

Using TypeScript to work with asynchronous child_process.exec operations

Having trouble implementing a child_process.exec call with TypeScript and finding error handling to be quite challenging. Here's the basic idea of what I'm attempting: import { promisify } from "util"; import { exec, ExecException } fr ...

Utilizing an Angular component for multiple purposes

For my Angular app, which is component-based and uses Angular version 1.5.5 with TypeScript, I have a header component that includes a country dropdown. This header component is used across multiple pages. However, when a country is selected from the dropd ...

How can I properly containerize an Express Gatsby application with Docker?

SOLUTION: I am currently working on a project involving an express-gatsby app that needs to be built and deployed using GitHub Actions. To deploy it on Heroku, I have learned that containerizing the app is necessary. As a result, I have created a Dockerfil ...

Steps to resolve the 'Cannot assign value to userInfo$ property of [object Object] that only has getter' issue in Angular

I am currently in the process of building a web application using NGXS, and I'm encountering a specific error that I'm trying to troubleshoot. The issue arises when I attempt to fetch data from an API and display it within a column on the page. D ...

Is it possible to retrieve data from a promise using the `use` hook within a context?

Scenario In my application, I have a component called UserContext which handles the authentication process. This is how the code for UserProvider looks: const UserProvider = ({ children }: { children: React.ReactNode }) => { const [user, setUser] = ...

Redux-toolkit payload does not recognize the specified type

While working on my project, I encountered an issue when using redux-toolkit. I have created the following reducer: setWaypointToEdit: (state, action: PayloadAction<WaypointToEditPayload>) => { let gridPolygonsData: GridPolygonsData; const { ...

Using Typescript to extract the type from within the function type parameters

I am currently utilizing an imported type definition that contains a function type definition with a fairly complex parameter type: export interface SomeTypeDefinition { someFunction: ( param1: string, param2: { key1: number, key2: s ...

Problems with installing ambient typings

I'm having trouble installing some ambient typings on my machine. After upgrading node, it seems like the typings are no longer being found in the dt location. Here is the error message I am encountering: ~/w/r/c/src (master ⚡☡) typings search mo ...

What is the process for creating a TypeScript type that is generic and includes a keyof property?

Looking to create a generic type that can be used as an argument in a function, but struggling with defining strongly typed property names (specificProperties in the example code snippet). type Config<T> = { specificProperties: keyof T[], dat ...

Having trouble retrieving the JSON data from the getNutrition() service method using a post request to the Nutritionix API. Just started exploring APIs and using Angular

When attempting to contact the service, this.food is recognized as a string import { Component, OnInit } from '@angular/core'; import { ClientService } from '../../services/client.service'; import { Client } from '../../models/Cli ...

Ways to retrieve the value of the variable within the confines of this particular

In my code, I have private variables in the constructor and public variables in the class. To reference these variables and functions, I use the "this" keyword. However, when trying to access these variables inside a function, I am getting an "undefined" ...