Typescript: Dynamic assignment to a typed map

Question

I'm writing some abstract entity system for fun where I have entities with traits. Traits have some fields, including dynamic data field:

enum TraitId {
  Movable = 'Movable', Rotatable = 'Rotatable', Scalable = 'Scalable', Collidable = 'Collidable'
}

interface TraitDataMovable {
  x: number;
  y: number;
}

type TraitDataMap = {
  [TraitId.Movable]: TraitDataMovable
  , [TraitId.Rotatable]: number // angle
  , [TraitId.Scalable]: number // scale
  , [TraitId.Collidable]: boolean // collides or not
}

interface TraitData<ID extends TraitId> {
  id: ID;
  data: TraitDataMap[ID];
  disabled?: boolean;
}

type EntityTraits = {
  [TID in TraitId]: TraitData<TID>
}

class Entity {
  id: string;
  traits: Partial<EntityTraits> = {};
}

So far I achieved correct behavior with manual assignment:

const ent = new Entity();

ent.traits.Rotatable = {
  id: TraitId.Rotatable, // id can only be Rotatable
  data: 100 // data can only be number
};

ent.traits.Collidable = {
  id: TraitId.Collidable, // id can only be Collidable
  data: true // data can only be boolean
}

const hasCollision = ent.traits.Collidable.data; // correctly typed as boolean

And now I'm trying to write function that adds any trait to the entity:

function addTraitToEntity(entity: Entity, traitData: TraitData<TraitId>) {
  entity.traits[traitData.id] = traitData;
  // Type 'TraitData<TraitId>' is not assignable to type 'undefined'.
}

function addTraitToEntity2<TID extends TraitId>(entity: Entity, traitData: TraitData<TID>) {
  entity.traits[traitData.id] = traitData;
  // Type 'TraitData<TID>' is not assignable to type 'Partial<EntityTraits>[TID]'.
  // Type 'TraitData<TID>' is not assignable to type 'undefined'
}

They work with // @ts-ignore, however I'd like to get rid of it and do it right. And understand how to have such system typed correctly.

Link to the playground

Николай Гольцев · Accepted Answer · 2020-09-28 11:34:20Z

1

The problem is the following. TS somehow loses information about TID when trying to resolve the type of traitData.id expression. Consequently, the only information it has at the moment is the constraint to ... extends TraitId. That's why TS resolves traitData.id expression to TraitId or TraitId.Movable | TraitId.Scalable | TraitId.Rotatable | TraitId.Collidable instead of TID.

The simplest way to achieve the goal is to use the modified variant of addTraitToEntity2 function with existing types:

function addTraitToEntity2<TID extends TraitId>(entity: Entity, traitData: TraitData<TID>) {
  (entity.traits[traitData.id] as any) = traitData;
}

Negative aspects:

as any is not a good way to solve issues;

Or as @Linda Paiste suggested, but as a generic function. Because without type variable you would be able to pass specific id member with an incorrect data member and vice versa.

function addTraitToEntity2<TID extends TraitId>(entity: Entity, traitData: TraitData<TID>) {
    entity.traits = {
        ...entity.traits,
        [traitData.id]: traitData
    };
}

Meantime, I refactored your code:

TS Playground

Improvements:

Less number of TS types;
Entity was introduced as an abstract class which includes API for add, remove, retrieve traits;
Traits become a member of Entity class;
Entity class is now generic and you can customize which traits entity can have;

answered Sep 28, 2020 at 11:34

Николай Гольцев

1,3471 gold badge8 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Fen1kz Over a year ago

Thanks, I'll mark your answer as valid within 2 days, if no one comes with idea how to make TS understsand that traitData.id is TID. Also thanks for idea to propagate that "TraitDataMap" to just Trait<ID>. I don't think it is worth to bloat Entity class in my example code stripped to explain the problem, not create a working system, but thanks for an efforn anyway

Николай Гольцев Over a year ago

You're welcome. Refactored code as I think shows how it should be written in canons of OOP paradigm.

Linda Paiste · Accepted Answer · 2020-09-27 20:41:42Z

1

Here's a roundabout solution to just avoid the error. It will work if you replace the entire object entity.traits instead of assigning just one property, like this:

function addTraitToEntity(entity: Entity, traitData: TraitData<TraitId>) {
    entity.traits = {
        ...entity.traits,
        [traitData.id]: traitData
    }
}

I've been playing around with this and I haven't really got a satisfying answer as to why your method doesn't work, but I think part of the problem is with typescript understanding that the key traitData.id matches the value traitData.

answered Sep 27, 2020 at 20:41

Linda Paiste

42.6k8 gold badges81 silver badges118 bronze badges

Collectives™ on Stack Overflow

Typescript: Dynamic assignment to a typed map

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related