Having issues with model with Dynamic Keys

[alex-hladun]

Hey all, I am getting a typescript error 'Type is not assignable error' for the following. I am not sure what I am doing wrong.

Thanks in advance.

export const StoreTimeInterval = types.model({
  openTime: types.maybe(types.number),
  closeTime: types.maybe(types.number),
});

const StoreMap = types.model({
  open: types.boolean,
  times: types.optional(types.array(StoreTimeInterval), []),
});

export const StoreType = types.model({
  name: types.maybe(types.string),
  address: types.maybe(types.string),
  city: types.maybe(types.string),
  iconUrl: types.maybe(types.string),
  coverUrl: types.maybe(types.string),
  storeNumber: types.maybe(types.number),
  storeHours: types.map(StoreMap),
});

export const Profile = types
  .model({
    user: User,
    stores: types.optional(types.map(StoreType), {}),
    storeArray: types.optional(types.array(StoreType), []),
  })

This is ok!

 `self.stores = self.stores?.replace({
        "1001": {
          name: "McDonalds (Sarcee Beecon Hill)",
          address: "1994 Maynard Rd. Calgary, AB, T2E6J8",
          city: "Calgary",
          iconUrl: "https://i.imgur.com/bwtfoyu.png",
          coverUrl: "https://i.imgur.com/xPUF6zr.png",
          storeNumber: 1001,
          storeHours: {
            Monday: {
              open: true,
              times: [{ open: 900, close: 1700 }],
            },
          },
        },
})

This is not!

self.storeArray = self.storeArray.replace([
        {
          name: "McDonalds (Sarcee Beecon Hill)",
          address: "1994 Maynard Rd. Calgary, AB, T2E6J8",
          city: "Calgary",
          iconUrl: "https://i.imgur.com/bwtfoyu.png",
          coverUrl: "https://i.imgur.com/xPUF6zr.png",
          storeNumber: 1001,
          storeHours: {
            Monday: {
              open: true,
              times: [{ open: 900, close: 1700 }],
            },
            Tueday: {
              open: true,
              times: [{ open: 900, close: 1700 }],
            },
          },
        },
      ]);

It gives error

`Type '{ Monday: { open: true; times: { open: number; close: number; }[]; }; Tueday: { open: true; times: { open: number; close: number; }[]; }; }' is not assignable to type 'IMSTMap<IModelType<{ open: ISimpleType<boolean>; times: IOptionalIType<IArrayType<IModelType<{ openTime: IMaybe<ISimpleType<number>>; closeTime: IMaybe<ISimpleType<number>>; }, {}, _NotCustomized, _NotCustomized>>, [...]>; }, {}, _NotCustomized, _NotCustomized>> & IStateTreeNode<...>'.`

[EmilTholin]

Hi @alex-hladun!

TypeScript cannot infer all the needed information automatically in this case, so you can use cast to cast the node snapshot to an instance type. You will then see that there is a slight error in the code; it's supposed to be openTime and closeTime:

self.storeArray.replace([
  cast({
    name: "McDonalds (Sarcee Beecon Hill)",
    address: "1994 Maynard Rd. Calgary, AB, T2E6J8",
    city: "Calgary",
    iconUrl: "https://i.imgur.com/bwtfoyu.png",
    coverUrl: "https://i.imgur.com/xPUF6zr.png",
    storeNumber: 1001,
    storeHours: {
      Monday: {
        open: true,
        times: [{ openTime: 900, closeTime: 1700 }]
      }
    }
  })
]);

There is also a tiny error in the first snippet, but I'm not sure why TypeScript can't pick that up in the map replace. You will see it if you instead clear the map and set the new entry:

self.stores.clear();
self.stores.set("1001", {
  name: "McDonalds (Sarcee Beecon Hill)",
  address: "1994 Maynard Rd. Calgary, AB, T2E6J8",
  city: "Calgary",
  iconUrl: "https://i.imgur.com/bwtfoyu.png",
  coverUrl: "https://i.imgur.com/xPUF6zr.png",
  storeNumber: 1001,
  storeHours: {
    Monday: {
      open: true,
      times: [{ openTime: 900, closeTime: 1700 }]
    }
  }
});

[alex-hladun]

@EmilTholin Thanks so much, that worked! The self.stores.set is working as expected, however, even though it is a map...

[EmilTholin]

Great! Yeah, I'm not sure exactly why TypeScript can pick up the correct types for set but not for replace for maps.