Type 'N[P]' cannot be used to index type 'IComponents<N>'

Question

I trying to realize entity component system pattern in typescript. I have a class for entities where i want to keep components of entity. I want to create independent package for this pattern and use it in my other projects.

This is Entity class where i have an error.

type IComponents<N> = {
  [P in keyof N]?: Component<any, N>;
}

// eslint-disable-next-line @typescript-eslint/interface-name-prefix
export interface EntityType<N> {
  id: string;
  components: IComponents<N>;
  addComponent(component: Component<any, N>): void;
  removeComponent(componentId: N): void;
  print(): void;
}

export default class Entity<N> implements EntityType<N> {
  readonly id: string;
  components: IComponents<N> = {};

  constructor() {
    this.id = v4();
  }

  addComponent(component: Component<any, N>): void {
    this.components[component.name] = component;
  }

  removeComponent(componentName: N): void {
    delete this.components[componentName];
  }

  print(): void {
    console.log(JSON.stringify(this, null, 4));
  }
}

In the method addComponents i got this error Type 'N' cannot be used to index type 'IComponents<N>'.

This is signature for the Component class

export default abstract class Component<P, N> {
  readonly id: string;
  readonly name: N;
  props: P;

  protected constructor(props: P, name: N) {
    this.props = props;
    this.name = name;
    this.id = v4();
  }
}

There is a project where i use this package:

Creating component, entity and enum for components

export enum EComponents {
  position,
}


export default (): Entity<EComponents> => {
  const player = new Entity<EComponents>();
  player.addComponent(new PositionComponent());

  return player;
};

System which take an entity and handle it. In this method i want take from entity.components specific component and handle it

 update(entity: Entity): void {
    const component: PositionComponent | null = this.getComponent(entity);

    if (!component) return;

    const { x = 0, y = 0 } = component.props;
    const position = { x, y };

    if (this.keyboard.isKeyPressed('KeyW')) {
      position.y -= 3;
    }

    if (this.keyboard.isKeyPressed('KeyA')) {
      position.x -= 3;
    }

    if (this.keyboard.isKeyPressed('KeyS')) {
      position.y += 3;
    }

    if (this.keyboard.isKeyPressed('KeyD')) {
      position.x += 3;
    }

    entity.components['Position'].props = position;
  }

Answer 1

I wrote two types IComponents and IMappedComponents. IComponents for list of components which extends from Component. And second type IMappedComponents for list of components for object in Entity.

export type IComponents<N extends keyof any> = {
  [P in N]?: Component<any, N>;
};


export type IMappedComponents<N extends keyof any, C extends IComponents<N>> = {
  [P in N]?: C[P];
};

// eslint-disable-next-line @typescript-eslint/interface-name-prefix
export interface EntityType<N extends keyof any, C extends IComponents<N>> {
  id: string;
  components: IMappedComponents<N, C>;
  addComponent(component: C[N]): void;
  removeComponent(componentId: N): void;
  print(): void;
}

export default class Entity<N extends keyof any, C extends IComponents<N>> implements EntityType<N, C> {
  readonly id: string;
  components: IMappedComponents<N, C> = {};

  constructor() {
    this.id = v4();
  }

  addComponent(component: C[N]): void {
    if (component) {
      this.components[component.name] = component;
    }
  }

  removeComponent(componentName: N): void {
    delete this.components[componentName];
  }

  print(): void {
    console.log(JSON.stringify(this, null, 4));
  }
}