Mobx Flow functions are not type checked by FlowType without .bind(this)

Question

When we use MobX flow decorated functions, flowtype thinks this is of type any and does no type checking.

class MyComponent extends Component<*> {
   actionMethod = flow(function*(){
        yield this.notAMethod();
   });
}

However, if we bind this to the generator, flow understands the type of this is MyComponent.

 class MyComponent extends Component<*> {
       actionMethod = flow((function*(){
            yield this.notAMethod();
       }).bind(this));
    }

My question is how can we ensure that these methods are type checked.

• Is there any linting rule to ensure we bind(this) correctly?
• Can we improve the mobx typings?
• Is this an issue with flow?

Answer 1

Your question reduces to the ability to create a custom lint. Eslint has a great library for writing your own eslint rules. You can compare using https://astexplorer.net/, the difference between your code with and without this. Then you could write an eslint rule that looks something like this (Untested):

// @no-flow
"use strict";
// Help from  https://astexplorer.net/
module.exports.rules = {
  "mobx-flow-requires-bind": context => ({
    CallExpression: function(node) {
      const ancestors = context.getAncestors();
      const parent = ancestors.length > 0 && ancestors[ancestors.length - 1];
      if (node.callee && node.callee.name === "flow") {
        if (node.arguments.length === 1) {
          const callee = node.arguments[0].callee;
          if (!(callee && callee.property && callee.property.name === "bind")) {
            context.report(node, "Calls to flow must be used with .bind");
          }
        }
      }
    }
  })
};

You can integrate the above code into your repo with this tutorial.