Converting TypeScript interface types into an array of classes: Serialization process

Question

Converting TypeScript interface types into an array of classes: Serialization process

I am encountering an issue with typescript typings in my current project. Specifically, I'm developing a small game engine that follows the entity-component-system model. My goal is to convert types of interfaces into an array of classes to define the necessary components for the system.

My ideal outcome would be:

export interface IMovable {
    position: CompPosition;
    velocity: CompVelocity;
}

export class MoveSystem extends System<IMovable> {

    // This array should specify all component classes from IMovable.
    protected requiredComponents = [ CompPosition, CompVelocity ];

    /// ...

}

Alternatively, I aim to achieve:

export interface IMovable {
    position: CompPosition;
    velocity: CompVelocity;
}

export class MoveSystem extends System<IMovable> {

    /* The properties of requiredComponents have the same name as in the interface,
       but their types are different - instances in the interface and classes in 
       requiredComponents. */
    protected requiredComponents = {
        position: CompPosition, 
        velocity: CompVelocity 
    };

    /// ...

}

Any suggestions or advice are greatly appreciated.

javascript typescript game-engine

Answer 1

Answer №1

After careful consideration, I have devised what I believe to be the optimal solution for this situation. It seems that achieving this task using an array approach may not be feasible or efficient from a developer standpoint, so my choice is to utilize the object method.

class Position implements Component {
    x: number = 0
    y: number = 0
    readonly requiredComponents: {}
}

class Velocity implements Component {
    velX: number = 0
    velY: number = 0
    readonly requiredComponents: {}
}

type ComponentConstructor<T> = new(...args: any[]) => T

interface Component<A = {}, B = {}, C = {}, D = {}> {
    readonly requiredComponents: A & B & C & D
}

interface IMovable {
    position: ComponentConstructor<Position>
    velocity: ComponentConstructor<Velocity>
}

class Player implements Component<IMovable> {
    readonly requiredComponents = {
        position: Position,
        velocity: Velocity,
    }
}

If there is additional information on how these components will interact, I could possibly offer an even more refined solution. At this time, I still question the necessity of your current approach.

Answer 2

After careful consideration, I have devised what I believe to be the optimal solution for this situation. It seems that achieving this task using an array approach may not be feasible or efficient from a developer standpoint, so my choice is to utilize the object method.

class Position implements Component {
    x: number = 0
    y: number = 0
    readonly requiredComponents: {}
}

class Velocity implements Component {
    velX: number = 0
    velY: number = 0
    readonly requiredComponents: {}
}

type ComponentConstructor<T> = new(...args: any[]) => T

interface Component<A = {}, B = {}, C = {}, D = {}> {
    readonly requiredComponents: A & B & C & D
}

interface IMovable {
    position: ComponentConstructor<Position>
    velocity: ComponentConstructor<Velocity>
}

class Player implements Component<IMovable> {
    readonly requiredComponents = {
        position: Position,
        velocity: Velocity,
    }
}

If there is additional information on how these components will interact, I could possibly offer an even more refined solution. At this time, I still question the necessity of your current approach.

Answer 3

Answer №2

I have finally uncovered a solution. While it may not be the most optimal, it does fulfill its intended purpose:

type Class<T> = new(...args: any[]) => T;

type ComponentStore<T> = { [P in keyof T]: Component };
type RequiredComponents<T extends ComponentStore<T>> = { [P in keyof T]: Class<T[P]> };

abstract class System<T extends ComponentStore<T>> {

    protected abstract requiredComponents: RequiredComponents<T>;

    // ...

}

interface IMovable {
    position: CompPosition;
    velocity: CompVelocity;
}

class MoveSystem extends System<IMovable> {

    protected requiredComponents = {
        position: CompPosition,
        velocity: CompVelocity
    };

    // ...

}

Many thanks to all those who made an attempt or took the time to read through this.

Answer 4

I have finally uncovered a solution. While it may not be the most optimal, it does fulfill its intended purpose:

type Class<T> = new(...args: any[]) => T;

type ComponentStore<T> = { [P in keyof T]: Component };
type RequiredComponents<T extends ComponentStore<T>> = { [P in keyof T]: Class<T[P]> };

abstract class System<T extends ComponentStore<T>> {

    protected abstract requiredComponents: RequiredComponents<T>;

    // ...

}

interface IMovable {
    position: CompPosition;
    velocity: CompVelocity;
}

class MoveSystem extends System<IMovable> {

    protected requiredComponents = {
        position: CompPosition,
        velocity: CompVelocity
    };

    // ...

}

Many thanks to all those who made an attempt or took the time to read through this.

Converting TypeScript interface types into an array of classes: Serialization process

Answer №1

Answer №2

Similar questions

I seem to be having issues with the way the lighting is functioning in three.js; it is not acting

Reasons for aligning inline elements with input boxes

Increasing values in Mongoose using $inc can be done by following these steps

Tips for transferring the default value from the form input to the payload

Search form with a variety of fields that allows for searching without needing to repeat the component for each condition

getting TypeScript configured with webpack

Algorithm for File Naming

Press on a specific div to automatically close another div nearby

Dynamic SVG positioning

There is a syntax error that occurs when attempting to begin a key with a hyphen (-)

Showing the test steps in an Allure report for a Jasmine Protractor framework test case

Breaking the website with an HTML comment

Encountering Error with Axios in Nuxt while Navigating Pages

Assign a value to the input field based on changes made in another input field

Store the ID of a div in a variable

When updating the HTML content, JavaScript is outputting the code as text instead of running it

Having trouble getting the items to show up on the canvas

Safari's anchor links tend to leap higher than necessary

The jQuery toggle function seems to be skipping alternate items

A custom script developed to detect the presence of the numeric combination "11" and promptly notify the