The mobx-state-tree community has a new home. This thread is preserved for historical purposes. The content of this conversation may be innaccurrate or out of date. Go to new community home →

Generic set action in Typescript

July 21, 2019 at 7:11pm

Hi, does anybody know how to make something like this work? For quickly prototyping it would be nice to have a typesafe set method.

import { Instance, types } from 'mobx-state-tree';
const storeFields = types.model({
  text: types.string,
  number: types.number,
  bool: types.boolean
});
type IStoreFields = Instance<typeof storeFields>;
const store = storeFields.actions(self => ({
  set(key: keyof IStoreFields, value: IStoreFields[typeof key]) {
    self[key] = value; // TS-Error: Cannot assign to '[$stateTreeNodeType]' because it is a read-only property
  }
}));

In JS it's no problem until it explodes at runtime because of an invalid combination of key and value.

July 21, 2019 at 9:27pm

Nick Ribal@elektronik

9:27pm

You can use Object.assign(self, { [key]: value, }). However, Object.assign's return types are surprising: https://stackoverflow.com/questions/39906054/typescript-object-assign-confusion Personally I stopped using Object.assign for this very reason and I prefer strongly typed individual setters. Here's one way to do it:

set({ text = self.text, number = self.number, bool = self.bool, }) {
  self.text = text
  self.number = number
  self.bool = bool
}

Yes, it is verbose and repetitive, which sucks. But at least it is type safe.

November 29, 2019 at 10:45am

ingowonner@ingowonner

10:45am

@pixelkritzel

, i was facing the same issue and i could solve your "read-only" error, simply by using type IStoreFields = SnapshotIn<typeof storeFields>; instead of "Instance"

Timo@pixelkritzel

12:33pm

@ingowonner

interesting. Which typescript version do you use? And what are your settings in your tsconfig?

Because I tried to replicate this and got this error

ingowonner@ingowonner

1:47pm

@pixelkritzel

i double checked my test case and it seems to make a difference if the model has a single type of types (eg: types.string) or different ones, like in your sandbox.

i created a sandbox on my own and tried to figure it out and it seems to work now for multiple types. take a look and tell me if this may fix your problem:

https://codesandbox.io/s/pensive-mahavira-gh7lw?fontsize=14&hidenavigation=1&module=%2Fsrc%2Findex.ts&theme=dark

for the tsconfig i added the recommended flags from mst https://github.com/mobxjs/mobx-state-tree#recommend-compiler-flags

Timo@pixelkritzel

1:57pm

Hi, thanks for replying

But this solutions looses the type safety. I added a test where one provides the wrong type and typescript can't catch it anymore.

ingowonner@ingowonner

5:09pm

@pixelkritzel

oh damn! thanks for checking! ... i think we're coming closer!

https://codesandbox.io/s/green-wave-myouu?fontsize=14&hidenavigation=1&module=%2Fsrc%2Findex.ts&theme=dark

Edited

Timo@pixelkritzel

5:25pm

@ingowonner

Impressive. I like it very much.

November 30, 2019 at 4:05am

Nick Ribal@elektronik

4:05am

This is awesome! I've been avoiding Object.assign because it isn't typesafe, but with this approach we can use it:

setUserDetails(userDetailsToSet: Partial<SnapshotIn<typeof self>>) {
  Object.assign(self, userDetailsToSet)
},

We should PR it to the docs :)

November 30, 2019 at 12:11pm

do you want to write about it? Else I would write a blog post about it and of course give credit to you and link to this discussion.

December 2, 2019 at 8:58am

ingowonner@ingowonner

8:58am

feel free to write your blogpost. credit would be awesome ;)

December 5, 2019 at 3:49pm

Timo@pixelkritzel

3:49pm

@ingowonner

And there was another issue. Your solution didn't support optional types. I managed to use it with SnapshotIn but had to tell Typescript to ignore the line self[key] = value

https://codesandbox.io/embed/cool-architecture-eqxb6?fontsize=14&hidenavigation=1&module=%2Fsrc%2Findex.ts&theme=dark

Edited

December 7, 2019 at 7:29am

ingowonner@ingowonner

7:29am

what happens if you switch back from SnapshotIn to Instance?

December 8, 2019 at 8:09am

Timo@pixelkritzel

8:09am

The problem is in the types.optional- it accept a string or undefined but will be inferred as only string. Of SnapshotIn, SnpshotOut and Instance only SnapshotIn describes the types to set something correctly.

8:13am

This looks a little bit less brute force:

.actions(self => ({
    set<
      K extends keyof SnapshotIn<typeof self>,
      T extends SnapshotIn<typeof self>
    >(key: K, value: T[K]) {
      self[key] = value as any;
    }
  }));