如何使用Flow为非NPM包的模块添加类型标注？

别担心，刚接触Flow的时候摸不清文档太正常了！我来帮你理清楚你这套模块结构对应的类型处理方式～

先把你给出的代码整理成规范的代码格式，方便后续说明：

./src/lib/myModule/MyModule.js #

// @flow
class MyModule {
  constructor(str: string) { // 这里补个类型标注，Flow才能识别参数类型
    this.aString = str;
  }
}

export { MyModule as AnotherName };

./src/lib/myModule/index.js #

export * from './MyModule';

这个导出方式完全没问题，外部可以直接通过import { AnotherName } from './src/lib/myModule'导入，也为后续拆分文件留足了灵活性。

针对你的场景，推荐两种类型定义方案，适配不同的后续扩展需求：

方案1：直接在源文件内标注类型（最便捷） #

Flow支持在业务代码里直接写类型标注，不需要单独的类型文件。你可以给类的实例属性也加上类型声明，让Flow的检查更完整：

// @flow
class MyModule {
  aString: string; // 提前声明实例属性的类型
  constructor(str: string) {
    this.aString = str;
  }
}

export { MyModule as AnotherName };

这样外部导入AnotherName后，Flow会自动识别它的类结构和类型，比如实例的aString会被识别为string类型。

方案2：单独写类型定义文件（适合后续多文件拆分） #

如果之后要把MyModule拆分成多个文件，单独的类型文件会更便于维护。你需要在./src/lib/myModule/下创建一个MyModule.js.flow（Flow会自动识别这个后缀的类型文件），内容如下：

// @flow
declare class MyModule {
  aString: string;
  constructor(str: string): void;
}

export type { MyModule };
export { MyModule as AnotherName };

你的业务代码文件MyModule.js保持原有逻辑即可，index.js的导出方式不变，外部导入时Flow会优先读取这个类型文件的定义。

如果之后要把模块拆分成多个文件（比如工具函数、子类、单独的类型定义等），可以这么做：

• 在index.js里按需导出各个模块的内容，比如：

export { AnotherName } from './MyModule';
export { formatString } from './StringUtils';
export type { ModuleConfig } from './ModuleTypes';

• 对应的类型文件也可以拆分，比如创建StringUtils.js.flow、ModuleTypes.js.flow，再通过index.js统一导出，方便外部一次性导入所有需要的内容和类型。

你可以在其他文件里测试导入，看看Flow的类型提示是否正常：

// @flow
import { AnotherName } from './src/lib/myModule';

const instance = new AnotherName('hello');
console.log(instance.aString); // Flow会提示这是string类型
// 如果传入数字比如new AnotherName(123)，Flow会直接报错，说明类型检查生效了

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