Returning self-referencing types in static methods within derived classes

Question

Returning self-referencing types in static methods within derived classes

Exploring the concept of Polymorphic this in TypeScript 1.7, which was brought to my attention in a thoughtful discussion thread I found on Stack Overflow, I came across an interesting way to define methods in a class with a return type of this. This has the neat benefit of automatically setting the return types of these methods in any extending classes to their respective this type. Take a look at this code snippet to better understand:

class Model {
  save():this {    // return type: Model
    // Perform save operation and return the current instance
  }
}

class SomeModel extends Model {
  // inherits the save() method - return type: SomeModel
}

However, my curiosity now leads me to a scenario where I want an inherited static method to have a return type that references the class itself. The idea is best illustrated through code:

class Model {
  static getAll():Model[] {
    // Return all instances of Model in an array
  }

  save():this {
    // Perform save operation and return the current instance
  }
}

class SomeModel extends Model {
  // Inherits the save() method - return type: SomeModel
  // Also inherits getAll() - return type: Model (How can we change that to SomeModel?)
}

Considering that Polymorphic this in TypeScript 1.7 does not support static methods by design, I might need to explore alternative implementations for this functionality.

EDIT: Keep an eye on the progress of this Github issue here: https://github.com/Microsoft/TypeScript/issues/5863

typescript

Answer 1

Answer №1

Implementing this in TypeScript 2.0 and above is entirely possible. By utilizing an inline { new(): T } type to capture this, you can achieve your desired outcome:

type Constructor<T> = { new (): T }

class BaseModel {
  static getAll<T>(this: Constructor<T>): T[] {
    return [] // placeholder
  }
  
  /**
   * Illustration of a static method with an argument:
   */
  static getById<T>(this: Constructor<T>, id: number): T | undefined {
    return // placeholder
  }

  save(): this {
    return this // placeholder
  }
}

class SubModel extends BaseModel {}

const sub = new SubModel()
const savedSub: SubModel = sub.save()

// Excitingly, SubModel.getAll() now returns SubModels, not BaseModel
const savedSubs: SubModel[] = SubModel.getAll()

It's important to note that getAll still requires no arguments with this typing.

For further insights, refer to https://www.typescriptlang.org/docs/handbook/2/generics.html#using-class-types-in-generics and

Answer 2

Implementing this in TypeScript 2.0 and above is entirely possible. By utilizing an inline { new(): T } type to capture this, you can achieve your desired outcome:

type Constructor<T> = { new (): T }

class BaseModel {
  static getAll<T>(this: Constructor<T>): T[] {
    return [] // placeholder
  }
  
  /**
   * Illustration of a static method with an argument:
   */
  static getById<T>(this: Constructor<T>, id: number): T | undefined {
    return // placeholder
  }

  save(): this {
    return this // placeholder
  }
}

class SubModel extends BaseModel {}

const sub = new SubModel()
const savedSub: SubModel = sub.save()

// Excitingly, SubModel.getAll() now returns SubModels, not BaseModel
const savedSubs: SubModel[] = SubModel.getAll()

It's important to note that getAll still requires no arguments with this typing.

For further insights, refer to https://www.typescriptlang.org/docs/handbook/2/generics.html#using-class-types-in-generics and

Answer 3

Answer №2

After reading through the easiest solution provided in the GitHub problem, you can implement InstanceType<> in this manner:

class Foo {
    static create<T extends typeof Foo>(this: T): InstanceType<T> {
        return new this() as InstanceType<T>
    }

    static getAll<T extends typeof Foo>(this: T): Array<InstanceType<T>> {
        return []
    }
}

class Bar extends Foo { }

const a = Bar.getAll() // typeof a is Bar[]
const b = Bar.create() // typeof b is Bar.

I added the create method for demonstration purposes, inspired by the mentioned GitHub instance.

Answer 4

After reading through the easiest solution provided in the GitHub problem, you can implement InstanceType<> in this manner:

class Foo {
    static create<T extends typeof Foo>(this: T): InstanceType<T> {
        return new this() as InstanceType<T>
    }

    static getAll<T extends typeof Foo>(this: T): Array<InstanceType<T>> {
        return []
    }
}

class Bar extends Foo { }

const a = Bar.getAll() // typeof a is Bar[]
const b = Bar.create() // typeof b is Bar.

I added the create method for demonstration purposes, inspired by the mentioned GitHub instance.

Answer 5

Answer №3

Referring to the Brains answer, it is possible to directly obtain the return type using

(typeof Class)['foo']

For instance:

class MyClass {
    myFunction(param:string):number{
        return typeof param === "string"?1:0
    }
                                             /** Just class['foo'] to normal methods */   
    static myStaticFunctions(cards: string): Parameters<MyClass['MyFunction']>[0] {
                        /** and *(typeof class)* ['foo'] to static methods */   
        const typedReturn: ReturnType<(typeof MyClass)['myStaticFunctions']> = "works"
        return typedReturn
        
    }
}

Answer 6

Referring to the Brains answer, it is possible to directly obtain the return type using

(typeof Class)['foo']

For instance:

class MyClass {
    myFunction(param:string):number{
        return typeof param === "string"?1:0
    }
                                             /** Just class['foo'] to normal methods */   
    static myStaticFunctions(cards: string): Parameters<MyClass['MyFunction']>[0] {
                        /** and *(typeof class)* ['foo'] to static methods */   
        const typedReturn: ReturnType<(typeof MyClass)['myStaticFunctions']> = "works"
        return typedReturn
        
    }
}

Answer 7

Answer №4

Do you anticipate this particular static method to return a specific value in the inherited subclass? Maybe something along these lines:

class X {
    private static _items = new Array<X>();
    static items(): X[] { return X._items; }
    constructor() { X._items.push(this); }
}

class Y extends X {

    static items(): Y[] { 
        return <Y[]>(X.items().filter(i => i instanceof Y)); 
    }
    constructor() { super(); }; 
}

var x = new X();
var y = new Y();

console.log(
     "X count: " + X.items().length + 
    " Y count: " + Y.items().length);

When run, this will generate "X count: 2 Y count: 1". Is this the outcome you're envisioning, or something else?

Answer 8

Do you anticipate this particular static method to return a specific value in the inherited subclass? Maybe something along these lines:

class X {
    private static _items = new Array<X>();
    static items(): X[] { return X._items; }
    constructor() { X._items.push(this); }
}

class Y extends X {

    static items(): Y[] { 
        return <Y[]>(X.items().filter(i => i instanceof Y)); 
    }
    constructor() { super(); }; 
}

var x = new X();
var y = new Y();

console.log(
     "X count: " + X.items().length + 
    " Y count: " + Y.items().length);

When run, this will generate "X count: 2 Y count: 1". Is this the outcome you're envisioning, or something else?

Returning self-referencing types in static methods within derived classes

Answer №1

Answer №2

Answer №3

For instance:

Answer №4

Similar questions

"Typescript with React and Material-UI Table - A seamless user experience with no errors

Eliminating empty elements from arrays that are nested inside other arrays

What are the steps to restrict a user from accessing a specific website?

Mismatched data types for function arguments

Taking a segmented snapshot of a canvas using a flexible design scheme

Ensuring seamless collaboration between Typescript node modules

Keeping an Rxjs observable alive despite encountering errors by simply ignoring them

Navigating through the Angular Upgrade Roadmap: Transitioning from 5.0 to 6

Skip over any null values in Angular

The unit tests are not triggering the execution of setTimeout

Tips for displaying the date of a JSON response in Angular HTML format?

Avoiding Overload Conflicts: TypeScript and the Power of Generic Methods

the process of altering properties in vue js

Trying to automatically select a checkbox upon page load in Angular 6

Using create-react-app with TypeScript for server-side rendering

The issue with dispatching actions in TypeScript when using Redux-thunk

The process of obtaining the generic return type of a method in a Typescript class that has been instantiated through a factory-like function

The functionality to close the Angular Material Dialog is not functioning as expected

Retrieve the output of a function in TypeScript

What is the best way to showcase several images using Sweet Alert 2?