How can you type a collection of initialized class instances in Typescript when given an object containing classes?

Question

How can you type a collection of initialized class instances in Typescript when given an object containing classes?

Imagine having an object that resembles the following:

const typeMap = {category1: Category1, category2: Category2}

In this case, Category1 and Category2 refer to classes, and there could potentially be hundreds of different categories.

Now I also have a dynamically generated object that matches up with this structure:

const instanceMap = {category1: new typeMap.category1(), category2: new typeMap.category2()}

The challenge arises when attempting to assign types to this instanceMap since it is created dynamically.

Using the standard "typeof typeMap" method doesn't provide accurate results. Even though I access instanceMap.category1, the methods belonging to Category1 aren't visible in the auto-complete suggestions. It appears that the typeof operator treats it as typeof CategoryX, leading to the loss of visibility for all associated methods.

typescript

Answer 1

Answer №1

To create a mapped type utilizing the properties of classMap, you can use the InstanceType<T> utility type for each property value:

const classMap = { service1: Service1, service2: Service2 };
type ClassMap = typeof classMap;
type InstanceMap = { [K in keyof ClassMap]: InstanceType<ClassMap[K]> };

This is essentially equivalent to

/* type InstanceMap = {
    service1: Service1;
    service2: Service2;
} */

You can then assign this type to annotate the variable instanceMap without any errors:

const instanceMap: InstanceMap = {
    service1: new classMap.service1(),
    service2: new classMap.service2()
}; // ok

If you need to generate instanceMap dynamically, you will need mapped types within your function and utilize type assertions during implementation, as the compiler may not be able to deduce the logic. For example:

function makeInstanceMap<T extends Record<keyof T, object>>(
    classMap: { [K in keyof T]: new () => T[K] }): T {
    return Object.fromEntries(
        Object.entries(classMap).map(([k, v]) => [k, new (v as any)()])
    ) as T;
}

const instanceMap = makeInstanceMap(classMap);
/* const instanceMap: {
    service1: Service1;
    service2: Service2;
} */

Playground link to code

Answer 2

To create a mapped type utilizing the properties of classMap, you can use the InstanceType<T> utility type for each property value:

const classMap = { service1: Service1, service2: Service2 };
type ClassMap = typeof classMap;
type InstanceMap = { [K in keyof ClassMap]: InstanceType<ClassMap[K]> };

This is essentially equivalent to

/* type InstanceMap = {
    service1: Service1;
    service2: Service2;
} */

You can then assign this type to annotate the variable instanceMap without any errors:

const instanceMap: InstanceMap = {
    service1: new classMap.service1(),
    service2: new classMap.service2()
}; // ok

If you need to generate instanceMap dynamically, you will need mapped types within your function and utilize type assertions during implementation, as the compiler may not be able to deduce the logic. For example:

function makeInstanceMap<T extends Record<keyof T, object>>(
    classMap: { [K in keyof T]: new () => T[K] }): T {
    return Object.fromEntries(
        Object.entries(classMap).map(([k, v]) => [k, new (v as any)()])
    ) as T;
}

const instanceMap = makeInstanceMap(classMap);
/* const instanceMap: {
    service1: Service1;
    service2: Service2;
} */

Playground link to code

How can you type a collection of initialized class instances in Typescript when given an object containing classes?

Answer №1

Similar questions

Angular 7 throwing errors of undefined variables

Client-side condition handling in Angular 2

Personalized prefix for Angular and WebStorm components

Is it possible to utilize [key:string]: any in order to eliminate the requirement for an additional function when working

Challenge with Updating React Components When Switching Themes

Have I repeated myself in defining my class properties?

What is the best way to retrieve a property from a conditional type using generics?

The FaceBook SDK in React Native is providing an incorrect signature when trying to retrieve a token for iOS

angular primeng table has a checkbox to select all checkboxes

Angular2 allows for the firing of all columns in one click using *ngFor

Modify the data type of an object member based on its original type

Discovering the functionality of es6 object.assign and find methods within a typescript file

What are the steps to incorporate SignalR into a TypeScript project?

Difficulty locating the module in Typescript/Javascript

Automatic type inference for TypeScript getters

Ways to retrieve the key of an enum based on its value within Typescript

Retrieve the :id parameter from the URL as a numerical value in Node.js using Typescript

Passing a value from an HTML template to a method within an Angular 4 component

Guide to successfully passing a function as a prop to a child component and invoking it within Vue

Universal Angular along with Window's Innerwidth