Using TypeScript to expand a class by introducing a constructor with Partial<Type>

Question

Using TypeScript to expand a class by introducing a constructor with Partial<Type>

How can the User class be extended in TypeScript using Partial<User> as the constructor?

I am open to alternative solutions that do not involve Partial. For instance, initializing a blank class with new User({})

Currently, the AdvancedUser class only inherits properties from the User class, without any additional advanced?: properties.

export class User {
    first_name: string = ''
    last_name: string = ''
    email: string = ''

    constructor(data: Partial<User>) {
        Object.assign(this, data)
    }
}

export class AdvancedUser extends User {
    advanced?: {
        foo?: string
    }

    constructor(data: Partial<User>) {
        super(data)
    }
}

The code provided is functional. An error in my project caused the AdvancedUser() call to revert back to User().

javascript typescript

Answer 1

Answer №1

I am exploring alternative solutions that do not rely on Partial. For example, I am simply using the utility type to initialize a new class with empty values. For instance, creating a new User({})

Rather than the use of constructors with Partial, achieving the desired outcome can be done by leveraging the as keyword, which provides a cleaner approach in my view.

Regarding the advanced property, its absence from the output is due to the fact that it has not been initialized anywhere (neither inline nor in the constructor). If you intend to maintain it as an optional property, a simple initialization with undefined will suffice:

export class User {
    first_name: string = '';
    last_name: string = '';
    email: string = '';

    constructor(data: User) {
        Object.assign(this, data);
    }
}

export class AdvancedUser extends User {
    advanced?: {
        foo?: string
    } = undefined;

    constructor(data: User) {
        super(data);
    }
}

const au = new AdvancedUser({} as User);
/* OUTPUT:
AdvancedUser: {
  "first_name": "",
  "last_name": "",
  "email": "",
  "advanced": undefined
} 
*/
console.log(au);

Answer 2

I am exploring alternative solutions that do not rely on Partial. For example, I am simply using the utility type to initialize a new class with empty values. For instance, creating a new User({})

Rather than the use of constructors with Partial, achieving the desired outcome can be done by leveraging the as keyword, which provides a cleaner approach in my view.

Regarding the advanced property, its absence from the output is due to the fact that it has not been initialized anywhere (neither inline nor in the constructor). If you intend to maintain it as an optional property, a simple initialization with undefined will suffice:

export class User {
    first_name: string = '';
    last_name: string = '';
    email: string = '';

    constructor(data: User) {
        Object.assign(this, data);
    }
}

export class AdvancedUser extends User {
    advanced?: {
        foo?: string
    } = undefined;

    constructor(data: User) {
        super(data);
    }
}

const au = new AdvancedUser({} as User);
/* OUTPUT:
AdvancedUser: {
  "first_name": "",
  "last_name": "",
  "email": "",
  "advanced": undefined
} 
*/
console.log(au);

Answer 3

Answer №2

Consider using Partial in this scenario:

interface IUserData {
  first_name: string;
  last_name: string;
  email: string;
}

interface IAdvancedUserData {
  doAdvancedStuff(IAdvancedStuffOptions) : string;
}

class AdvancedUserData implements IUserData, IAdvancedUserData {
  
}

To utilize Partial, ensure that your User accepts data of type Partial and then provide an AdvancedUserData instance to your AdvancedUser constructor.

Answer 4

Consider using Partial in this scenario:

interface IUserData {
  first_name: string;
  last_name: string;
  email: string;
}

interface IAdvancedUserData {
  doAdvancedStuff(IAdvancedStuffOptions) : string;
}

class AdvancedUserData implements IUserData, IAdvancedUserData {
  
}

To utilize Partial, ensure that your User accepts data of type Partial and then provide an AdvancedUserData instance to your AdvancedUser constructor.

Using TypeScript to expand a class by introducing a constructor with Partial<Type>

Answer №1

Answer №2

Similar questions

What is the best way to iterate over JSON data and organize the output based on the key value?

The jQuery script is functioning flawlessly in one specific direction

How to retrieve the value of an element within a facebox div with jquery

Tips for Saving process.argv in a .js File for Future Reference

Dollar Sign vs "$$()" Sparkling Protractor with "by.css()" vs "$()"

Transmit parameters via onclick event on FullCalendar

Error encountered with MobileFirst version 8 and Angular JS v1.5.3 integration using Bootstrap

The confusing case of jQuery's e.preventDefault: Unable to submit form despite preventing default behavior

What is the best approach to implement server-side rendering in Next.js while utilizing Apollo React hooks for fetching data from the backend?

Safari Browser does not currently offer support for MediaRecorder functionality

Creating a personalized state object containing unresolved promises in React Native utilizing axios inside a custom React Hook

The JavaScript button's onClick event is not functioning properly, despite the method executing normally

Node.js and Express: tackling the problem of duplicate variables

Step-by-step guide on deleting an entire row from a PHP webpage

Developers specializing in Google Maps navigate to a particular destination

What is the best way to display two cards while concealing a third one using a "show more"

Learn how to automatically set the checked state of a radio button by toggling another radio button

Efficiently finding a group of substrings within a JavaScript string

Limiting the number of checkboxes selected in a Checkbox Group based on

Tips on leveraging an attribute for type guarding in a TypeScript class with generics