Typescript errors trying to index my object

[alex-hladun]

Hey all, back again with another question. I am running into Typescript issues when adding an action to change my data and haven't been able to find a solution.

I am getting compile error

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'IMSTMap<IModelType<{ name: IMaybe<ISimpleType<string>>; address: IMaybe<ISimpleType<string>>; city: IMaybe<ISimpleType<string>>; iconUrl: IMaybe<...>; coverUrl: IMaybe<...>; storeNumber: ISimpleType<...>; storeHours: IMapType<...>; }, {}, _NotCustomized, _NotCustomized>> & IStateTreeNode<...>'.
  No index signature with a parameter of type 'string' was found on type 'IMSTMap<IModelType<{ name: IMaybe<ISimpleType<string>>; address: IMaybe<ISimpleType<string>>; city: IMaybe<ISimpleType<string>>; iconUrl: IMaybe<...>; coverUrl: IMaybe<...>; storeNumber: ISimpleType<...>; storeHours: IMapType<...>; }, {}, _NotCustomized, _NotCustomized>> & IStateTreeNode<...>'.

when i try to use the following action:

 toggleOpen(storeNumber: string, day: string) {
      self.stores[storeNumber].storeHours[day].open = false;
    },

The issue is using storeNumber as an index.

Here is my model:

export const Profile = types
  .model({
    stores: types.optional(types.map(StoreType), {}),
  })

and my types:

const StoreHours = types.model({
  open: types.boolean,
});

export const StoreType = types.model({
  name: types.maybe(types.string),
  address: types.maybe(types.string),
  storeNumber: types.identifier,
  storeHours: types.map(StoreHours),
});

for Reference, here is my data:

self.stores.replace({
        "1001": {
          name: "McDonalds (Sarcee Beecon Hill)",
          address: "1994 Maynard Rd. Calgary, AB, T2E6J8",
          storeNumber: "1001",
          storeHours: {
            Monday: {
              open: true,
            },
          },
        },

I thought adding the types.identifer might work, but no luck. Any help is greatly appreciated :)

[EmilTholin]

Hi @alex-hladun!

You have to access the map properties with the get method. You also have to make sure you handle the potential undefined values, or TypeScript will complain. For example:

const Profile = types
  .model({
    stores: types.optional(types.map(StoreType), {})
  })
  .actions((self) => ({
    toggleOpen(storeNumber: string, day: string) {
      const store = self.stores?.get(storeNumber);
      if (store) {
        const storeHour = store.storeHours.get(day);
        if (storeHour) {
          storeHour.open = false;
        }
      }
    }
  }));

I'm not exactly sure what your use case is, but it might be easier to just put the toggleOpen action directly on the StoreHours model.

const StoreHours = types
  .model({
    open: types.boolean
  })
  .actions((self) => ({
    toggleOpen() {
      self.open = !self.open;
    }
  }));