React项目从Flow迁移至TypeScript，如何让Flow兼容TS模块并视为any？

我之前做React项目从Flow转TypeScript的时候也碰到过一模一样的问题——Webpack和TS配置都调试好了，编译构建完全正常，但单独跑Flow检查时，只要Flow文件里导入了TS模块，就会报找不到模块的错误。

你遇到的错误具体是这样的：

src/SomeFlowModule.js:5 5: import TypeScriptModule from './TypeScriptModule'; ^^^^^^^^^^^^^ ./TypeScriptModule. Required module not found

本质原因是Flow默认不识别.ts/.tsx后缀的模块，所以得手动配置让Flow把这些TS模块当成any类型处理，下面是两个亲测有效的方案：

方案一：模块映射+Stub文件 #

1. 打开项目根目录的.flowconfig，在[options]区块中添加以下模块映射规则：

   module.name_mapper='^./\(.*\)\.tsx?$' -> '<PROJECT_ROOT>/flow-typed/ts-module-stub.js'
   

   这条规则会把所有相对路径导入的TS/TSX文件，统一映射到我们即将创建的stub文件上。

2. 如果项目里没有flow-typed目录，先新建一个；然后在这个目录下创建ts-module-stub.js文件，内容只需要这几行：

   // @flow
   declare module '*' {
     declare var exports: any;
     export default exports;
   }
   

   这样Flow在解析TS模块导入时，就会用这个stub文件来识别，直接把模块类型设为any，不会再抛出“找不到模块”的错误。

方案二：全局声明TS模块类型 #

如果你不想额外维护stub文件，也可以直接在全局声明所有TS模块的类型为any：

1. 在flow-typed目录下创建一个全局声明文件，比如global-ts-modules.js，内容如下：

   // @flow
   declare module '*.ts' {
     declare var exports: any;
     export default exports;
   }
   declare module '*.tsx' {
     declare var exports: any;
     export default exports;
   }
   

2. 不用担心配置问题，Flow默认会扫描flow-typed目录下的声明文件，所以只要文件创建好，下次跑Flow检查时就会自动识别所有TS模块，把它们当成any类型处理。

额外小贴士 #

如果之后你有个别TS模块需要临时给Flow添加更精确的类型（不想用any兜底），可以单独给那个模块写Flow声明文件放在flow-typed里，它会自动覆盖全局的any声明，灵活性很高。

内容的提问来源于stack exchange，提问作者harryg