A class featuring a unique property that holds a property belonging to a type <T extends Class>

Question

A class featuring a unique property that holds a property belonging to a type <T extends Class>

Currently, I am in the process of developing an Engine class that is capable of taking a map of various Module classes upon its construction and instantiating them by passing itself. Subsequently, the created instances are then stored within the modules. To ensure that the modules existing on the engine are known and can be declared expectedly by functions requiring an argument type of Engine, I have utilized generics.

In addition, apart from holding these maps of module instances, this Engine class possesses map event handlers as well. These handlers anticipate a callback that takes the Engine instance as their first parameter. Registering these handlers can be accomplished through a public method available to the same class.

An illustrative example of a potential module structure may resemble the following:


class Renderer extends Module<{Renderer: Renderer}> {
    constructor(engine: Engine<{Renderer: Renderer}>) {
        super(engine);

        this.engine.addEventHandler('draw', drawSomething);
    }

    renderText(message: string) {
        console.log(message);
    }
}

In this scenario, the event handler drawSomething would appear similar to the one depicted below:


function drawSomething(engine: Engine<{Renderer: Renderer}>): void {
    engine.modules.Renderer.renderText('hello world');
}

The issue I am currently facing pertains to the registration of the event handler drawSomething. It appears that the generics initially passed are seemingly ignored during the verification process when ensuring that the handler is correctly typed. TypeScript has notified me with the following message:

Type 'Engine<{}>' is not assignable to type 'Engine<{ Renderer: Renderer; }>'

My primary objective at this point is to devise a method to make sure that TypeScript recognizes that when I register an event handler onto an instance of the Engine containing specific modules, the handler will also be automatically passed that identical Engine instance inclusive of those modules once it gets invoked.

I should mention that my current TypeScript version in use is 3.5.3.

typescript typescript-generics

Answer 1

Answer №1

The main issue lies in the recursive type definition of Module, where it allows another type that must be a subtype of itself.

Original Code Snippet

class Module<TModulesOfEngine extends Modules = {}> {
    engine: Engine<TModulesOfEngine>;

    constructor(engine: Engine<TModulesOfEngine>) {
        this.engine = engine;
    }
}

class Engine<TModules extends Modules = {}> {
    public modules: TModules;
    public eventHandlers: {
        [eventName: string]: EventHandler<TModules>[];
    } = {};

    constructor(modules: ConstructableModules<TModules> = {} as ConstructableModules<TModules>) {
        // code omitted for brevity
    }
...

In certain scenarios, the polymorphic this type can be utilized, like demonstrated in this reference: Typescript - Generic type extending itself

However, utilizing the this type is not viable in static methods or constructors, resulting in an error message as seen below.

class Module {
    engine: Engine<this>;

    // Error: A 'this' type is available only in a non-static member of a class or interface.
    constructor(engine: Engine<this>) { 
        this.engine = engine;
    }
}

Despite being less visually appealing, the subsequent recursive type definition functions effectively

Solution Proposed

class Module<T extends Module<T>> {
    engine: Engine<T>;

    constructor(engine: Engine<T>) {
        this.engine = engine;
    }
}

class Engine<T extends Module<T>> {
    public modules: ModuleMap<T>;
    public eventHandlers: {
       [eventName: string]: EventHandler<T>[];
    } = {};

    constructor(modules: ConstructableModule<ModuleMap<T>>) {
        // code omitted for brevity
    }

    addEventHandler(name: string, handler: EventHandler<T>): void {
        // code omitted for brevity
    }
}

For a live demonstration, visit the Typescript Playground.

Answer 2

The main issue lies in the recursive type definition of Module, where it allows another type that must be a subtype of itself.

Original Code Snippet

class Module<TModulesOfEngine extends Modules = {}> {
    engine: Engine<TModulesOfEngine>;

    constructor(engine: Engine<TModulesOfEngine>) {
        this.engine = engine;
    }
}

class Engine<TModules extends Modules = {}> {
    public modules: TModules;
    public eventHandlers: {
        [eventName: string]: EventHandler<TModules>[];
    } = {};

    constructor(modules: ConstructableModules<TModules> = {} as ConstructableModules<TModules>) {
        // code omitted for brevity
    }
...

In certain scenarios, the polymorphic this type can be utilized, like demonstrated in this reference: Typescript - Generic type extending itself

However, utilizing the this type is not viable in static methods or constructors, resulting in an error message as seen below.

class Module {
    engine: Engine<this>;

    // Error: A 'this' type is available only in a non-static member of a class or interface.
    constructor(engine: Engine<this>) { 
        this.engine = engine;
    }
}

Despite being less visually appealing, the subsequent recursive type definition functions effectively

Solution Proposed

class Module<T extends Module<T>> {
    engine: Engine<T>;

    constructor(engine: Engine<T>) {
        this.engine = engine;
    }
}

class Engine<T extends Module<T>> {
    public modules: ModuleMap<T>;
    public eventHandlers: {
       [eventName: string]: EventHandler<T>[];
    } = {};

    constructor(modules: ConstructableModule<ModuleMap<T>>) {
        // code omitted for brevity
    }

    addEventHandler(name: string, handler: EventHandler<T>): void {
        // code omitted for brevity
    }
}

For a live demonstration, visit the Typescript Playground.

Answer 3

Answer №2

The initial definition of the Modules interface caused a disruption in the generics chain. Any utilization of it led TypeScript to lose the previously assigned typing of Engine.modules. Because no generic could be provided for Module, there was no means of capturing the expected modules on Engine:

class Module<TModulesOfEngine extends Modules = {}> {
    engine: Engine<TModulesOfEngine>;

    constructor(engine: Engine<TModulesOfEngine>) {
        this.engine = engine;
    }
}

// This lacks generic arguments, thus hindering the preservation of typing.
interface Modules {
    [moduleName: string]: Module;
}

To address this issue, Modules must begin accepting TModulesOfEngine as well:

class Module<TModulesOfEngine extends Modules<TModulesOfEngine> = {}> {
    engine: Engine<TModulesOfEngine>;

    constructor(engine: Engine<TModulesOfEngine>) {
        this.engine = engine;
    }
}

interface Modules<TModulesOfEngine extends Modules<TModulesOfEngine> = {}> {
    [moduleName: string]: Module<TModulesOfEngine>;
}

The comprehensive implementation of this adjustment can be accessed through this TypeScript playground.

I discovered the oversight by eliminating the type defaults (e.g. TModules extends Modules = {}), which uncovered where neglecting to pass the generic occurred.

Answer 4

The initial definition of the Modules interface caused a disruption in the generics chain. Any utilization of it led TypeScript to lose the previously assigned typing of Engine.modules. Because no generic could be provided for Module, there was no means of capturing the expected modules on Engine:

class Module<TModulesOfEngine extends Modules = {}> {
    engine: Engine<TModulesOfEngine>;

    constructor(engine: Engine<TModulesOfEngine>) {
        this.engine = engine;
    }
}

// This lacks generic arguments, thus hindering the preservation of typing.
interface Modules {
    [moduleName: string]: Module;
}

To address this issue, Modules must begin accepting TModulesOfEngine as well:

class Module<TModulesOfEngine extends Modules<TModulesOfEngine> = {}> {
    engine: Engine<TModulesOfEngine>;

    constructor(engine: Engine<TModulesOfEngine>) {
        this.engine = engine;
    }
}

interface Modules<TModulesOfEngine extends Modules<TModulesOfEngine> = {}> {
    [moduleName: string]: Module<TModulesOfEngine>;
}

The comprehensive implementation of this adjustment can be accessed through this TypeScript playground.

I discovered the oversight by eliminating the type defaults (e.g. TModules extends Modules = {}), which uncovered where neglecting to pass the generic occurred.

A class featuring a unique property that holds a property belonging to a type <T extends Class>

Answer №1

Original Code Snippet

Solution Proposed

Answer №2

Similar questions

What is the best way to dynamically assign formControlNames in Angular using *ngFor?

Is it possible to determine the specific type of props being passed from a parent element in TypeScript?

What methods are available to change one JSON format into another?

Angular Observable returning null results

Specify the return type based on specific parameter value

The appearance of DC charts can vary when constructing an Angular application in production mode

Is it possible for me to dynamically alter the innerHTML of an input element using

Error: Uncaught Angular8 template parsing issue

Creating a factory function through typhography

Alter the attributes of an instance in a class using a function

Retrieve the href value from a string and then associate the modified data with the element in an Angular application

Next.js experiencing hydration error due to dynamic component

What is the maximum allowable size for scripts with the type text/json?

The return type of TypeScript functions is not being properly documented

How can I emphasize the React Material UI TextField "Cell" within a React Material UI Table?

Using TypeScript and controllerAs with $rootScope

Exploring the Differences Between ionViewWillEnter and ionViewDidEnter

"Uh-oh! Debug Failure: The statement is incorrect - there was a problem generating the output" encountered while attempting to Import a Custom Declarations File in an Angular

Import a JSON file into TypeScript declaration files (*.d.ts)

Is it possible to set up tsc to compile test specifications specifically from a designated directory?