The best approach for sending parameters to the parent class in TypeScript for optimal efficiency

Question

The best approach for sending parameters to the parent class in TypeScript for optimal efficiency

What's the optimal solution to this problem? I really appreciate how we can specify attributes in the constructor and TypeScript takes care of handling everything to assign values to the props in JavaScript - like I did with 'department' here.

However, I'm wondering if there is a convenient way to handle inheritance as well. Is there a method to initialize a subclass with all attributes and pass them to the super call without having to repeat all the properties?

I prefer not to manually list /* all the other attributes of the base class*/ just to initialize the class and fulfill the super call.

Thank you in advance for your assistance.

class Manager extends Employee {
  constructor(public department: number, /* all the other attributes of the base class*/ ){
    super( /* all the other attributes of the base class*/ );
  }
}

let myEmp = new Employee(1, "James"); // Base class
let myMng = new Manager (101, 2, "Jane" ); // Subclass

UPDATE: After receiving valuable feedback on TypeScript techniques, I arrived at this point. I am planning to refine it further to avoid explicitly mentioning and listing superclass members in the super-call. Your thoughts on this approach would be greatly appreciated.

class Manager extends Employee {
  constructor(public department: number, empData: Employee) {
    super(empData.id, empData.name);
  }
}

UPDATE #2 + ANSWER: Thanks to an insightful suggestion from @AluanHaddad and exploring Utility Types in TSC, I found the solution I was searching for.

Big thanks to all of you!

class Employee {
  constructor(public id: number, public name: string) {}
}

class Manager extends Employee {
  constructor(
    public department: number,
    ...superClassData: ConstructorParameters<typeof Employee >
  ) {
    super(...superClassData);
  }
}

let myEmp = new Employee(1, "James"); // Base class
let myMng = new Manager (101, 2,"Jane" ); // Subclass

javascript typescript oop inheritance

Answer 1

Answer №1

To simplify the code, consider using the parameter object pattern. Instead of passing multiple parameters, you can pass a single parameter with various fields.

  type EmployeeParams = {
    // include superclass parameters
  }

  type ManagerParams = {
    department: number
  } & EmployeeParams;

  class Employee {
    // define all necessary fields
    constructor(params: EmployeeParams){
      // initialize all fields
    }
  }

  class Manager extends Employee {
    department: number;
    constructor(params: ManagerParams){
      super(params);
      this.department = params.department;
    }
  }

Keep in mind that you must now explicitly specify separate fields within the class.

Answer 2

To simplify the code, consider using the parameter object pattern. Instead of passing multiple parameters, you can pass a single parameter with various fields.

  type EmployeeParams = {
    // include superclass parameters
  }

  type ManagerParams = {
    department: number
  } & EmployeeParams;

  class Employee {
    // define all necessary fields
    constructor(params: EmployeeParams){
      // initialize all fields
    }
  }

  class Manager extends Employee {
    department: number;
    constructor(params: ManagerParams){
      super(params);
      this.department = params.department;
    }
  }

Keep in mind that you must now explicitly specify separate fields within the class.

Answer 3

Answer №2

Instead of passing positional arguments to the constructors, utilize an object with named properties. The "options" object will act as a supertype of the options object for the base class, allowing you to simply pass the entire object:

interface FooArgs {
  a: number
  b: string
}

class Foo {
  public a: number;
  public b: string;

  constructor(args: FooArgs) {
    this.a = args.a;
    this.b = args.b;
  }
}

interface BarArgs extends FooArgs {
  c: number
}

class Bar extends Foo {
  public c: number;
  
  constructor(args: BarArgs) {
    super(args);
    this.c = args.c;
  }
}

Playground

This approach also enhances readability at the call site when creating these objects using new:

const John = new Employee({ age: 32, salary: 60000, name: 'John Smith' });
const Mary = new Manager({ age: 45, salary: 90000, name: 'Mary Brown', directReports: 7 });

Answer 4

Instead of passing positional arguments to the constructors, utilize an object with named properties. The "options" object will act as a supertype of the options object for the base class, allowing you to simply pass the entire object:

interface FooArgs {
  a: number
  b: string
}

class Foo {
  public a: number;
  public b: string;

  constructor(args: FooArgs) {
    this.a = args.a;
    this.b = args.b;
  }
}

interface BarArgs extends FooArgs {
  c: number
}

class Bar extends Foo {
  public c: number;
  
  constructor(args: BarArgs) {
    super(args);
    this.c = args.c;
  }
}

Playground

This approach also enhances readability at the call site when creating these objects using new:

const John = new Employee({ age: 32, salary: 60000, name: 'John Smith' });
const Mary = new Manager({ age: 45, salary: 90000, name: 'Mary Brown', directReports: 7 });

Answer 5

Answer №3

Explore how the following code snippets showcase the use of the rest property and type definitions to configure parameters specific to a class.

You can opt to choose between ...

type employeeConfig = {
  field_1: string,
  field_2: number,
}
type managerConfig = {
    department: number,
} & employeeConfig;

class Employee {
  public field_1: string;
  public field_2: number;

  constructor({ field_1, field_2 }:employeeConfig) {

    this.field_1 = field_1;
    this.field_2 = field_2;
  }
}

class Manager extends Employee {
  public department: number;

  constructor({ department, ...restConfig }:managerConfig) {
    super(restConfig);

    this.department = department;
  }
}

const manager = new Manager({ department: 12, field_2: 2, field_1: "foo" });

console.log({ manager });

... or even with ...

type employeeConfig = {
  field_1: string,
  field_2: number,
}
type managerConfig = {
    department: number,
} & employeeConfig;

class Employee {
  constructor(config:employeeConfig) {

    Object.assign(this, config);
  }
}

class Manager extends Employee {
  constructor({ department, ...restConfig }:managerConfig) {
    super(restConfig);

    Object.assign(this, { department });
  }
}

const manager = new Manager({ department: 12, field_2: 2, field_1: "foo" });

console.log({ manager });

The latter approach is more versatile in terms of the parameter configuration but comes at the cost of explicit declaration for any public class fields.

Answer 6

Explore how the following code snippets showcase the use of the rest property and type definitions to configure parameters specific to a class.

You can opt to choose between ...

type employeeConfig = {
  field_1: string,
  field_2: number,
}
type managerConfig = {
    department: number,
} & employeeConfig;

class Employee {
  public field_1: string;
  public field_2: number;

  constructor({ field_1, field_2 }:employeeConfig) {

    this.field_1 = field_1;
    this.field_2 = field_2;
  }
}

class Manager extends Employee {
  public department: number;

  constructor({ department, ...restConfig }:managerConfig) {
    super(restConfig);

    this.department = department;
  }
}

const manager = new Manager({ department: 12, field_2: 2, field_1: "foo" });

console.log({ manager });

... or even with ...

type employeeConfig = {
  field_1: string,
  field_2: number,
}
type managerConfig = {
    department: number,
} & employeeConfig;

class Employee {
  constructor(config:employeeConfig) {

    Object.assign(this, config);
  }
}

class Manager extends Employee {
  constructor({ department, ...restConfig }:managerConfig) {
    super(restConfig);

    Object.assign(this, { department });
  }
}

const manager = new Manager({ department: 12, field_2: 2, field_1: "foo" });

console.log({ manager });

The latter approach is more versatile in terms of the parameter configuration but comes at the cost of explicit declaration for any public class fields.

The best approach for sending parameters to the parent class in TypeScript for optimal efficiency

Answer №1

Answer №2

Answer №3

Similar questions

Incorporate an HTML span element with an onclick function bound in Angular framework

Guide on displaying link parameter information on a separate webpage using only JavaScript

what is the best way to center list items in material ui?

What is the method to access the information within the observer?

What is the best way to pass my request data to my $scope variable?

Utilize the fitBounds feature from GoogleMaps in Vuejs for seamless integration

Converting text data into JSON format using JavaScript

Javascript promise failing to deliver

Dynamic text displayed on an image with hover effect using JavaScript

Unable to execute internal functional tests due to this error: [POST http://localhost:4444/wd/hub/session] unable to connect - ECONNREFUSED

Creating Awesome Icons in Kendo Grid with Code In this tutorial, we will learn how to programm

What is preventing me from being able to import a React component from a file?

Ways to store AJAX response data for future use

Overriding the w-4xl with sm:text-2xl in Tailwind CSS

Mastering the art of duplicating an array of objects in TypeScript

Creating a CSS animation to repeat at regular intervals of time

Update the appearance of a cell if the value within it is equal to zero

Error: Unable to access the 'version' property of null

Dynamic styling updates on page refresh in Next.js

Tips on incorporating express-mysql-session in a TypeScript project