Mobx: TypeScript: error when using "flow" decorator

[beshanoe]

I'm always getting an error when using flow decorator:

Apparently there's some typings mismatch.
When I call flow to wrap function * () everything works ok

[beshanoe]

Moreover, when I use flow as function like this

  fetchUser = flow(function*(this: UserDetails, userId: string) {
    this.fetchingUser = true
    try {
      this.user = yield accm.getUser(userId)
    } catch (error) {
      this.errorMsg = error
    }
    this.fetchingUser = false
  })

I have to explicitly specify type of this when I have a flag noImplicitAny

[beshanoe]

looking at code, looks like "flow" is not supposed to be used as decorator at all, right? Then docs are misleading

[mweststrate]

Correct, flow is not a decorator. Could you PR where the docs are misleading? Might be copy / paste mistake from asyncAction from mobx-utils, which can be used as decorator.

[beshanoe]

Sure, I can, but maybe we just need to add decorator functionality to the lib, so it will work like action decorator or others? Using flow as fn wrapper is not good in TS, so I've made a decorator wrapper for flow in my project and its usage is much more convenient

[beshanoe]

Regarding docs, in gh-pages branch it's correct already https://github.com/mobxjs/mobx/blob/gh-pages/docs/best/actions.md, but on webpage and gh-pages-mobx4 with a typo https://github.com/mobxjs/mobx/blob/gh-pages-mobx4/docs/best/actions.md

Though, I found one misleading line, so here is the PR https://github.com/mobxjs/mobx/pull/1406

[mweststrate]

Thanks! Will update docs soon

[skeary-immt]

Hi @mweststrate,

We just hit the same thing when using Typescript. The main problem I think is that the docs around flow() don't indicate that the example won't compile in Typescript and don't explain how to resolve this. I guess you could argue that people might know how to resolve the issue themselves but I suspect this will catch more people out.

Unless I'm missing something the cleanest solution in Typescript for async actions is to use the asyncAction decorator in mobx-utils. With it this is properly typed and you get niceness of the flow approach. This makes it unfortunate that it's deprecated. Perhaps this should be reviewed or perhaps a decorator equivalent of flow should be added to the core mobx package?

Thanks!
Simon

[beshanoe]

@skeary-immt I had to come up with a simple decorator like this

import { flow } from 'mobx'

function flowed(
  _: Object,
  _1: string,
  descriptor: TypedPropertyDescriptor<(...args: any[]) => IterableIterator<any>>
) {
  if (descriptor.value) {
    descriptor.value = flow(descriptor.value) as any
  }
}

Hopefully, someday more elaborated version will become a part of mobx, like action which can be use in both modes. But the most disliked feature of flow approach is that yield returned values are not typed, it's not mobx fault, it's just what TS have now.

[vensa-albertgao]

Any update on this? I encountered the same issue today.

@beshanoe
your approach seems interesting, how to use it? What's the 2nd param for this decorator? Thanks :)

[JohnGalt1717]

@beshanoe I'd love to know how to use this too.

[beshanoe]

@vensa-albertgao @JohnGalt1717 sorry for the late response, I don't know if the issue is already solved inside mobx, but the decorator I wrote doesn't accept any parameters. You just need to apply it to your class generator-method like:

class Store {
  @flowed
  *makeRequest() {
      yield doAsyncStuff();
  }
}

[JohnGalt1717]

@beshanoe Thanks! It appears to work nicely.

[rebolyte]

@beshanoe How would I use your @flowed decorator if I need to reference this within my method? If I use the generator class method syntax (*makeRequest) it solves the typing problem, but this is undefined at runtime.

[beshanoe]

@rebolyte Probably it's because the function is not bound to the original object. Here is a possible change:

function flowed(
  target: Object,
  _1: string,
  descriptor: TypedPropertyDescriptor<(...args: any[]) => IterableIterator<any>>
) {
  if (descriptor.value) {
    descriptor.value = flow(descriptor.value.bind(target)) as any // binding
  }
}

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs or questions.