Question

我有一个大型Web项目，目前使用RequireJS在开发和生产优化中加载模块。在Flow之前，文件看起来像这样：

define(function(require) {
  const React = require('react');

  class Foo extends React.Component {
    // [...some component code]
  }

  return Foo;
});

我有兴趣将Flow添加到我的系统中。我已经或多或少地使用了它，但是我错过了一些关键功能，因为我无法说服Flow我所需的模块是实际的模块。

鉴于以下代码，我预计会出现类型错误，但只有在我将import * as React from 'react'添加到模块顶部时，它才有效，允许流识别React.Component类型。但这与通过RequireJS加载模块不兼容。

我已尝试为define创建各种定义，但我不知道如何告诉flow要求对象作为函数的参数传递是＆＃34 ;实＆＃34;需要。

示例代码：

// @flow
define(function(require) {
  const React = require('react');

  type Props = {
    foo: string
  }

  type State = {
    bar: string
  }

  class Foo extends React.Component<Props, State> {
    someMethod(): void {
      this.setState({
        bar: 1 // should trigger a type error
      });
    }

    // [...other component code]
  }

  return Foo
}

在我的flow-typed RequireJS文件中：

declare function define(module: ((require: string) => any) => any): void;

Answer 1

Flow只知道如何解析和跟踪CommonJS和ES6模块文件中的类型。在https://github.com/facebook/flow/issues/28中有一些基于评论的超级解决方案，但最终它并不是为AMD设计的，所以你基本上是在写一个应用程序注释，以使Flow将您的文件视为CommonJS而不是AMD。

我了解AMD对您的工作流程非常重要，因此您的构建过程中的重大变化似乎是不可取的？鉴于此，我想到的唯一真正的选择是您将脚本更改为ES6模块，然后编译为AMD模块以便以后捆绑。例如，Babel可以使用其AMD输出支持来实现这一点，然后可以像往常一样捆绑这些AMD模块。

无论你怎么看待它，它绝对是痛苦的，也是一项不错的工作。 AMD在现代工具中并不常见，至少不是作为一种创作格式。

如何使用RequireJS加载的模块导入Flow的类型信息？

1 个答案: