Typescript dictionary with dynamic keys

Question

New to typescript and struggling to describe a dictionary.

Basically I export several stores (the example below is reduced on purpose), which I feed to a Registry class.

Ideally the stores dictionary type I would like to be dynamic in a way that I can export as many stores I want, but when I try to use the registry in my component and try to access something that is not in the stores dict, TS will complain and the IDE will pick it up.

Any TS wizardry will be much appreciated

stores.ts

import UserStore from './user.ts';
import ListStore from './list.ts';
export {
   UserStore, ListStore
};

registry.ts


export default class Registry{

    stores = {};

    constructor(stores: any){
        Object.keys(stores).forEach((name: string) => {
            const cls = stores[name];
            this.stores[name] = new cls(this);
        });
    }

UPDATE based on the answer provided below. I changed the registry to this. All stores derive from BaseStore. However, I don't get TS complaining when I try to access a non existent store

export default class Registry{

    stores: { [name: string]: BaseStore } = {};


    constructor(stores: any){
        Object.keys(stores).forEach((name: string) => {
            const cls = stores[name];
            if(cls){
                this.stores[name] = new cls(this);
            }
        });

What makes a store a store? Store subclasses? A link to a minimal, reproducible example on TS Playground would be helpful. — fedonev
– fedonev, Commented Nov 25, 2021 at 19:41
@fedonev A "store" is a concept in Redux, Flux, and ReactJS. It's not possible to make a TS Playground example because you need the rest of ReactJS available. — Dai
– Dai, Commented Nov 25, 2021 at 21:19
How would you call/instantiate the Registry class? Could you provide an example, please? — Producdevity
– Producdevity, Commented Nov 25, 2021 at 23:01

Yitzhak Barzilay · Accepted Answer · 2021-11-25 18:37:54Z

2

type storeType = {
    [key: string]: any // instead of any you can put any type you want...
}

now stores can have this:

const stores = {
    'userStore': 'anything',
    'listStore': 'anything'
}

console.log(stores.userStore) // will accept the type

answered Nov 25, 2021 at 18:37

Yitzhak Barzilay

714 bronze badges

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

4 Comments

Dai Over a year ago

I'd upvote you, but this is not a suitable use of any in TypeScript today.

Producdevity Over a year ago

I think this is more a way to bypass the TS checker and not really the way we should want to implement such things

Thomas Over a year ago

@Yitzhak I tried that already. However, this way I do not get the IDE complaining if I try to reference a non existent store

Yitzhak Barzilay Over a year ago

yea well that's because you are asking that stores will be dynamic, you can have it be dynamic and complain if the store does not exist at the same time, you need to decide if you want to add each time new store to the type store (for example) or just do a dynamic type as I wrote above

Collectives™ on Stack Overflow

Typescript dictionary with dynamic keys

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related