Fully typed flow idea

[kubk]

Mobx flow is great because it allows to write async flows without wrapping observable modifications with action/runInAction. But for TypeScript users it doesn't work well, because TS looses generator types:

const a = yield 1; // type 'any' instead of 'number'

There is an open TS issue: microsoft/TypeScript#32523

In MST repo I've found a trick to get type inference working:

export function* result<T>(promise: Promise<T>) {
  return (yield promise) as T;
}

or if we want to avoid type casts:

export function* result<T>(promise: Promise<T>): Generator<Promise<T>, T, T> {
  return yield promise;
}

It works with no issue:

But to make it working you should enable downlevelIteration in your tsconfig.json

So here is my question - should we add this utility function to Mobx codebase too and describe it's usage in documentation? I believe that Mobx flow is useless for TS users without this function. Ready to make a PR.

We already have flowResult function for TS users. So it's better to come up with a better name rather than result :)

[kubk]

Hi @urugator @mweststrate Sorry for bothering you. I'd like to hear your opinion on that. Mobx already have flowResult, why not add one more zero-runtime helper? Even in the documentation example there is an issue:

The variable projects has type any in this case

[urugator]

I am sorry, but I am unable to provide qualified feedback on most TS related issues :) In this particular case I have zero experience with using flow (or generators in general) with TS.

[jtwigg]

@kubk Found my way here too because I can't get the TS version of Flow's to the compile. I've been staring at the example for awhile now.

I was keen to utilize the "cancel" method of flows, but its lot looking achievable.

[harunou]

A bit improved solution with a handy type alias, which I've been using in my projects.

export type FlowGenerator<TReturn = void> = Generator<Promise<void>, TReturn, void>;

export function toFlowGeneratorFunction<TArgs extends unknown[], TReturn = void>(
    fn: (...args: TArgs) => Promise<TReturn> | TReturn
): (...args: TArgs) => FlowGenerator<TReturn> {
    return function* flowGeneratorFunction(...args: TArgs): FlowGenerator<TReturn> {
        let value: TReturn = undefined as TReturn;
        yield Promise.resolve(fn(...args)).then(result => {
            value = result;
        });

        return value;
    };
}

I don't know when we could have something like this in Mobx or Mobx-utils, so I have published it as a package
https://www.npmjs.com/package/to-flow-generator-function

[tiengtinh]

Your solution worked perfectly, and I can now have fully typed React Mobx stack while using Flow. Thank a lot for putting this together!

[hackey9]

I'm share my solution, or pattern.

I'm using "experimentalDecorators": true.
Use "Async Generator" syntax with decorator. Call async functions and other flow methods as usually. Call yield after each await:

@flow.bound
private async *loadFAQList() {
    try {
        this.isLoading = true;

        const faqList = await this.store.api.faq.fetchAll();
        yield;

        this.faqList = faqList;
    } catch (e) {
        yield;

        console.error(e);
    } finally {
        this.isLoading = false;
    }
}

And some hacks. I can call async mobx flow actions, and await typed result.

declare global {
    // we can extend built-in AsyncGenerator 👀
    // now, all async generators are promises also. No flowResult needs.
    interface AsyncGenerator<T = unknown, TReturn = any, TNext = unknown> extends Promise<TReturn> {}
}

Then we can do this:

class Store {
    // return type should be omitted
    // return type infer as `AsyncGenerator<never, number[], unknown>` (and `Promise<number[]>` 😁)
    @flow.bound async *method() {
        return [1,2,3]
    }
}

const example = async () => {
    const store = new Store();

    // return number[] (works!)
    const result1 = await store.method()

    // explicit type (works!)
    const result2: number[] = await store.method()

    // @ts-expect-error: Type number[] is not assignable to type string[]
    const result3: string[] = await store.method();
}

This is not perfect solution, types can still broken, in rare cases. But it works, as long as you follow the pattern.