Setting up Typescript classes that inherit from one another with diverse properties for each subclass

Question

Setting up Typescript classes that inherit from one another with diverse properties for each subclass

I'm fairly new to Typescript and currently grappling with how to effectively manage class inheritance when base classes have distinct properties.

Essentially, I have a base class where I aim to define shared functionality and a series of subclasses with varying properties that correspond to different database models. I'm trying to determine the best approach for defining the types in this scenario.

For instance:

class BaseClass {
  static create(props) { /*... */ }
  update(props) { /*... */ }
}

type SubClassOneProps = {
  firstName: string
  lastName: string
}
class SubClassOne extends BaseClass {
  firstName!: string
  lastName!: string
}

type SubClassTwoProps = {
  streetName: string
  streetNumber: number
}
class SubClassTwo extends BaseClass {
  streetName!: string
  streetNumber!: number
}

// I want to establish typings that facilitate the following:
SubClassOne.create({firstName: "Bob", lastName: "Doe"})
SubClassTwo.create({streetName: "Sunset Blvd", streetNumber: 100})

// and apply a similar concept to the instance methods, though I may utilize Partial<> for these

Due to the unique properties in each subclass, the signatures vary slightly, even though they all consist of basic key/value pairs. I'm struggling to determine the correct typing and how to specify the properties for each subclass.

In addition, I'll need to include some metadata for each property (specifically, whether they are publicly accessible), and create an instance method that can output the public properties to a JSON object. However, I'll tackle that issue separately at a later time.

Any advice or guidance on this matter would be greatly appreciated!

typescript class inheritance

Answer 1

Answer №1

The main issue lies in the absence of polymorphic this types on static class members. For more details, check out microsoft/TypeScript#5863.

When dealing with instance members, the type named this can be used to reference the current subclass:

class BaseClass {
  declare test: Array<this>;
}

class SubClassOne extends BaseClass { /* snip */ }
const sc1 = new SubClassOne();
sc1.test // SubClassOne[]

class SubClassTwo extends BaseClass { /* snip */ }
const sc2 = new SubClassTwo();
sc2.test // SubClassTwo[]

However, there isn't a similar approach for static members. For static methods, a workaround involves making the method generic and connecting the method's this context to the generic type parameter using a this parameter:

class BaseClass {
  declare static test: <T extends BaseClass>(this: new () => T) => Array<T>;
}

class SubClassOne extends BaseClass { /* snip */ }
const sc1t = SubClassOne.test();
// const sc1t: SubClassOne[]

class SubClassTwo extends BaseClass { /* snip */ }
const sc2t = SubClassTwo.test();
// const sc1t: SubClassTwo[]

This methodology allows us to obtain a this type from a constructor indirectly.

To associate each subclass with its respective "props" type, it's suggested to turn the base class into a generic class where the type parameter T corresponds to the props type:

class BaseClass<T extends object> {
  update(props: T) { Object.assign(this, props) }
}

class SubClassOne extends BaseClass<SubClassOneProps> {
  firstName!: string
  lastName!: string
}
const sc1 = new SubClassOne();
sc1.update({ firstName: "Bob", lastName: "Doe" });

class SubClassTwo extends BaseClass<SubClassTwoProps> {
  streetName!: string
  streetNumber!: number
}
const sc2 = new SubClassTwo();
sc2.update({ streetName: "Sunset Blvd", streetNumber: 100 });

Now, we can define create():

class BaseClass<T extends object> {
  static create<T extends BaseClass<any>>(
    this: { new(): T },
    props: T extends BaseClass<infer U> ? U : never
  ) { const ret = new this(); ret.update(props); return ret; }
}

For create(), the this context must be a zero-argument constructor producing an instance of the generic type T, and conditional type inference is used to infer the props type. Essentially, if T is BaseClass<X> for some X, then

T extends BaseClass<infer U> ? U : never

evaluates to X.

Testing it out:

const sc1 = SubClassOne.create({ firstName: "Bob", lastName: "Doe" });
// sc1: SubClassOne
console.log(sc1.firstName.toUpperCase()) // "BOB"

const sc2 = SubClassTwo.create({ streetName: "Sunset Blvd", streetNumber: 100 });
// sc2: SubClassTwo
console.log(sc2.streetNumber.toFixed(2)) // "100.00"

Everything appears to be working well!

Playground link to code

Answer 2

The main issue lies in the absence of polymorphic this types on static class members. For more details, check out microsoft/TypeScript#5863.

When dealing with instance members, the type named this can be used to reference the current subclass:

class BaseClass {
  declare test: Array<this>;
}

class SubClassOne extends BaseClass { /* snip */ }
const sc1 = new SubClassOne();
sc1.test // SubClassOne[]

class SubClassTwo extends BaseClass { /* snip */ }
const sc2 = new SubClassTwo();
sc2.test // SubClassTwo[]

However, there isn't a similar approach for static members. For static methods, a workaround involves making the method generic and connecting the method's this context to the generic type parameter using a this parameter:

class BaseClass {
  declare static test: <T extends BaseClass>(this: new () => T) => Array<T>;
}

class SubClassOne extends BaseClass { /* snip */ }
const sc1t = SubClassOne.test();
// const sc1t: SubClassOne[]

class SubClassTwo extends BaseClass { /* snip */ }
const sc2t = SubClassTwo.test();
// const sc1t: SubClassTwo[]

This methodology allows us to obtain a this type from a constructor indirectly.

To associate each subclass with its respective "props" type, it's suggested to turn the base class into a generic class where the type parameter T corresponds to the props type:

class BaseClass<T extends object> {
  update(props: T) { Object.assign(this, props) }
}

class SubClassOne extends BaseClass<SubClassOneProps> {
  firstName!: string
  lastName!: string
}
const sc1 = new SubClassOne();
sc1.update({ firstName: "Bob", lastName: "Doe" });

class SubClassTwo extends BaseClass<SubClassTwoProps> {
  streetName!: string
  streetNumber!: number
}
const sc2 = new SubClassTwo();
sc2.update({ streetName: "Sunset Blvd", streetNumber: 100 });

Now, we can define create():

class BaseClass<T extends object> {
  static create<T extends BaseClass<any>>(
    this: { new(): T },
    props: T extends BaseClass<infer U> ? U : never
  ) { const ret = new this(); ret.update(props); return ret; }
}

For create(), the this context must be a zero-argument constructor producing an instance of the generic type T, and conditional type inference is used to infer the props type. Essentially, if T is BaseClass<X> for some X, then

T extends BaseClass<infer U> ? U : never

evaluates to X.

Testing it out:

const sc1 = SubClassOne.create({ firstName: "Bob", lastName: "Doe" });
// sc1: SubClassOne
console.log(sc1.firstName.toUpperCase()) // "BOB"

const sc2 = SubClassTwo.create({ streetName: "Sunset Blvd", streetNumber: 100 });
// sc2: SubClassTwo
console.log(sc2.streetNumber.toFixed(2)) // "100.00"

Everything appears to be working well!

Playground link to code

Answer 3

Answer №2

One efficient approach for a static function is by passing a generic to it, as demonstrated below:

class BaseClass {
  static create<T>(props: T) {
    /*... */
  }
  update(props) {
    /*... */
  }
}

type SubClassOneProps = {
  firstName: string;
  lastName: string;
};
class SubClassOne extends BaseClass {
  firstName!: string;
  lastName!: string;
}

type SubClassTwoProps = {
  streetName: string;
  streetNumber: number;
};
class SubClassTwo extends BaseClass {
  streetName!: string;
  streetNumber!: number;
}

SubClassOne.create<SubClassOneProps>({ firstName: 'Bob', lastName: 'Doe' });
SubClassTwo.create<SubClassTwoProps>({ streetName: 'Sunset Blvd', streetNumber: 100 });

In this context, T represents a generic and serves as the props type.

When invoking SubClassSmth.create({}), the generic is passed in.

If the function were not static, a cleaner method could be implemented by introducing the generic at the class level, eliminating the need to redefine it, as shown below:

class BaseClass<U> {
  create(props: U) {
    /*... */
  }
  update(props) {
    /*... */
  }
}

type SubClassOneProps = {
  firstName: string;
  lastName: string;
};
class SubClassOne extends BaseClass<SubClassOneProps> {
  firstName!: string;
  lastName!: string;
}

type SubClassTwoProps = {
  streetName: string;
  streetNumber: number;
};
class SubClassTwo extends BaseClass<SubClassTwoProps> {
  streetName!: string;
  streetNumber!: number;
}

const subClassOneFactory = new SubClassOne();
const subClassTwoFactory = new SubClassTwo();

subClassOneFactory.create({ firstName: 'Bob', lastName: 'Doe' });
subClassTwoFactory.create({ streetName: 'Sunset Blvd', streetNumber: 100 });

For more insights on the limitations of using class-level generics with static functions, refer to Calling a static function on a generic class in TypeScript

Answer 4

One efficient approach for a static function is by passing a generic to it, as demonstrated below:

class BaseClass {
  static create<T>(props: T) {
    /*... */
  }
  update(props) {
    /*... */
  }
}

type SubClassOneProps = {
  firstName: string;
  lastName: string;
};
class SubClassOne extends BaseClass {
  firstName!: string;
  lastName!: string;
}

type SubClassTwoProps = {
  streetName: string;
  streetNumber: number;
};
class SubClassTwo extends BaseClass {
  streetName!: string;
  streetNumber!: number;
}

SubClassOne.create<SubClassOneProps>({ firstName: 'Bob', lastName: 'Doe' });
SubClassTwo.create<SubClassTwoProps>({ streetName: 'Sunset Blvd', streetNumber: 100 });

In this context, T represents a generic and serves as the props type.

When invoking SubClassSmth.create({}), the generic is passed in.

If the function were not static, a cleaner method could be implemented by introducing the generic at the class level, eliminating the need to redefine it, as shown below:

class BaseClass<U> {
  create(props: U) {
    /*... */
  }
  update(props) {
    /*... */
  }
}

type SubClassOneProps = {
  firstName: string;
  lastName: string;
};
class SubClassOne extends BaseClass<SubClassOneProps> {
  firstName!: string;
  lastName!: string;
}

type SubClassTwoProps = {
  streetName: string;
  streetNumber: number;
};
class SubClassTwo extends BaseClass<SubClassTwoProps> {
  streetName!: string;
  streetNumber!: number;
}

const subClassOneFactory = new SubClassOne();
const subClassTwoFactory = new SubClassTwo();

subClassOneFactory.create({ firstName: 'Bob', lastName: 'Doe' });
subClassTwoFactory.create({ streetName: 'Sunset Blvd', streetNumber: 100 });

For more insights on the limitations of using class-level generics with static functions, refer to Calling a static function on a generic class in TypeScript

Setting up Typescript classes that inherit from one another with diverse properties for each subclass

Answer №1

Answer №2

Similar questions

Implement Angular backend API on Azure Cloud Platform

Retrieve the property of a Typescript object using a template argument

Using Angular: A guide to setting individual values for select dropdowns with form controls

React Native is throwing an error message saying that the Component cannot be used as a JSX component. It mentions that the Type '{}' is not assignable to type 'ReactNode'

Navigating to a component route in Angular

Using ngFor directive to iterate through nested objects in Angular

The combination of a reactive form and the latest object may result in a potential null or undefined

Using Webpack 4 and React Router, when trying to navigate to a sub path,

Invoke an RxJs observable to handle errors and retry the process

How can I dynamically replace a specific element inside a .map() function with a custom component when the state updates, without replacing all elements at once?

Sort and incorporate elements by multiple strings present in an array

In React-Native, implement a function that updates one state based on changes in another state

Avoiding the use of destructuring for undefined values in JavaScript can be achieved by implementing

Exploring Cypress: Leveraging the Power of Variable Assignment

Substitute this.bindMethod for function component

Does moment/moment-timezone have a feature that allows for the conversion of a timezone name into a more easily comprehendible format?

RouterModule is a crucial external component that is essential for integrating

Tips for solving a deliberate circular dependency in an angular provider

Determine the category of a nested key within a different type

Update the style dynamically in Angular using an ngFor directive and an array of data