TypeScript: Adding dynamic fields to a class at runtime with type safety

Question

I'm converting some legacy JS code to TS, and have run into an interesting typing situation. There is a module system that is loading class instances at runtime onto named properties of an instance of another class, and am trying to figure out how to type the object:

class Module {
  public name: string;
}

class ThisModule extends Module {
  public name = 'thisModule';

  public log = () => {
    console.log('ThisModule called!');
  };
}

class ThatModule extends Module {
  public name = 'thatModule';

  public log = () => {
    console.log('ThatModule called!');
  };
}

interface IModule extends Module {}

type ModulesInput = Module[];

class Container {
  public init = (modules: ModulesInput) => {
    for (const module of modules) {
      this[module.name] = module;
    }
  };
}

const thisModule = new ThisModule();
const thatModule = new ThatModule();

const container = new Container<ThisModule | ThatModule >();

const modules: ModulesInput = [
  thisModule,
  thatModule,
];
container.init(modules);

// Should not throw TS error
container.thisModule.log();
container.thatModule.log();

// Should throw error ("Property anythingElse does not exist on Container")
container.anythingElse.log();

The problem is that TypeScript is not recognizing that container.thisModule or container.thatModule should exist. It says TS2339: Property 'thisModule' does not exist on type 'Container'. (and also for thatModule, the same).

Is there a way to type this system? I have had some limited success so far adding multiple generics to the Container class (e.g. type keys = 'thisModule' | 'thatModule' and type ModulesInUse = ThisModule | ThatModule), but can TypeScript discover the names from the classes and dynamically learn that it should expect those keys on the container object to have types of their respective classes?

Thanks in advance!

I don't think such a thing is possible, but admittedly I am not an expect in TypeScript. — James, Oct 17 '21 at 15:26

score 3 · Answer 1 · edited Oct 18 '21 at 17:06

In order to get rid error from this line this[module.name] = module; you need to provide index signature: [prop: string]: Module.

Please be aware, that typescript don't track mutation except one case, hence you need to return new this from init property.

Whole code:

class Module {
  public name: string = '' // need to be initialized
}

class ThisModule extends Module {
  public name = 'thisModule' as const;

  public log = () => {
    console.log('ThisModule called!');
  };
}

class ThatModule extends Module {
  public name = 'thatModule' as const;

  public log = () => {
    console.log('ThatModule called!');
  };
}


type Reduce<
  T extends ReadonlyArray<Module>,
  Acc extends Record<string, unknown> = {}
  > =
  (T extends []
    ? Acc
    : (T extends [infer Head, ...infer Tail]
      ? (Tail extends Module[]
        ? (Head extends Module
          ? Reduce<Tail, Acc & Record<Head['name'], Head>>
          : never)
        : never)
      : never)
  )

class Container {
  [prop: string]: Module; // you need to provide index signature to class in order to use  this[module.name] = module

  public init = <M extends Module, Modules extends M[]>(modules: [...Modules]) => {
    for (const module of modules) {
      this[module.name] = module;
    }

    return this as Reduce<[...Modules]>
  };
}

const thisModule = new ThisModule();
const thatModule = new ThatModule()

const container = new Container();


const newContainer = container.init([
  thisModule,
  thatModule,
]);


// Should not throw TS error
newContainer.thisModule.log()
newContainer.thatModule.log();

// Should throw error ("Property anythingElse does not exist on Container")
newContainer.anythingElse.log() // error

Playground

I have used Reduce utility type, it works almost like Array.prototype.reduce, it folds all element from the tuple into one object.

Also, I have used variadic-tuple-types to infer each module from init argument <M extends Module, Modules extends M[]>(modules: [...Modules]).

Here is also a version that uses asserts this is ... to perform the assertion in place instead of returning the new value.

instead of returning `this as...` couldn't you do something with adding a return signature of `asserts this is Reduce` so that the outer context doesn't need to reassign the container just adds a type assertion on the already existing one? — Tadhg McDonald-Jensen, Oct 18 '21 at 13:58
@TadhgMcDonald-Jensen TS does not track mutations, I'm not sure about this approach — captain-yossarian from Ukraine, Oct 18 '21 at 14:05
Added the working playground link to your answer since it was too long to put in a comment, typescript can't do much mutability but type assertion functions are a thing. — Tadhg McDonald-Jensen, Oct 18 '21 at 17:06
@TadhgMcDonald-Jensen you have my upvote. This is very good point. I always used `asserts` with errors. Thanks you again!!! — captain-yossarian from Ukraine, Oct 18 '21 at 17:49

Tadhg McDonald-Jensen · Answer 2 · 2021-10-18T17:21:05.820

Typescript is limited by a notion that a class cannot have "dynamic fields" since those are really hard to typecheck within the class, however unions of the right fields and the class is valid and writing the correct type contracts in functions is very possible, there are 2 ways you can obtain the relevant info:

Option 1: have the `name` property typed as a literal

If the property name of your modules are typed not as string but as the literal string that it contains there is more room to leverage that later,

abstract class Module {
  public abstract name: string;
}

class ThisModule extends Module {
  public name:'thisModule' = 'thisModule';
           //  ^^^^^ this is the important bit

  public logThis = () => { console.log('ThisModule called!'); };
}
class ThatModule extends Module {
  public name:'thatModule' = 'thatModule';
           //  ^^^^^ this is the important bit

  public logThat = () => { console.log('ThatModule called!'); };
}

With this you could define the container type you are looking for with something like this:

type TypesafeContainer<ModuleUnion extends Module> = {
    [K in ModuleUnion["name"]]: ModuleUnion["name"] extends K ? ModuleUnion : never;
}

This takes a generic that is a union of multiple modules and generates the type you are looking for:

declare function makeContainer<T extends Module>(modules: T[]): TypesafeContainer<T>

const thisModule = new ThisModule();
const thatModule = new ThatModule();

const container = makeContainer([thisModule, thatModule]);

// does not throw TS error
container.thisModule.logThis();
container.thatModule.logThat();

// Should throw error ("Property anythingElse does not exist on Container")
container.anythingElse.log();

One problem is that if you try to declare a class Container to extend this type you get an error saying "An interface can only extend an object type or intersection of object types with statically known members."

class Container<T extends Module>  {
  public constructor(modules: T[]) {
    for (const [module] of modules) {
      this[module.name] = module;
    }
  };
}
interface Container<T extends Module> extends TypesafeContainer<T>{}
                                                     //^^ this is not allowed :(

I think this is mainly a limitation of typescript, there isn't any theoretical issue with this construct.

Option 2: `Pick` from an interface of all allowed modules

it is possible that carrying around a generic with every module might be annoying and if you drop the generic for name anywhere you may run into more obscure typing issues, an alternative is to explicitly list an interface with all supported modules:

interface CONTAINER_ALL_MODULES {
    thisModule: ThisModule
    thatModule: ThatModule
}
// still not valid unfortunately :(
interface Container2<K extends keyof CONTAINER_ALL_MODULES> extends Pick<CONTAINER_ALL_MODULES, K>{
    new(modules: Array<CONTAINER_ALL_MODULES[K]>): this
}

This interface for container runs into the same limitation that you can't extend a type with dynamic members, but a function with the correct type signature is still possible:

class RealContainer {
    // actual stuff here
}

declare function makeContainer2<K extends keyof CONTAINER_ALL_MODULES>(modules: Array<CONTAINER_ALL_MODULES[K]>): RealContainer & Pick<CONTAINER_ALL_MODULES, K>

const container2 = makeContainer2([thisModule, thatModule]);
// does not throw TS error
container2.thisModule.logThis();
container2.thatModule.logThat();

// Should throw error ("Property anythingElse does not exist on Container")
container2.anythingElse.log();

Hopefully this is helpful, hope you find something that works for you :)

ts playground

TypeScript: Adding dynamic fields to a class at runtime with type safety

2 Answers2

Option 1: have the name property typed as a literal

Option 2: Pick from an interface of all allowed modules

Option 1: have the `name` property typed as a literal

Option 2: `Pick` from an interface of all allowed modules