react + redux项目中如何组织flowtype

Question

只是想收集一些关于如何在 react + redux 项目中组织 flowtype 的意见。这里有一些示例项目结构：

actions
    -> UserAction.js ---> has some flowtype definition related to this action
    -> PostAction.js ---> has some flowtype definition related to this action
    ...
reducers
    -> UserReducer.js ---> has some flowtype definition related to this reducer
    -> PostReducer.js ---> has some flowtype definition related to this reducer
    ...
models
    -> User.js ---> has some flowtype definition related to this model
    -> Post.js ---> has some flowtype definition related to this model
    ...
components
containers

但是，我看到一些开源项目，例如 f8 是使用单个文件来定义所有类型，例如：

actions
    -> UserAction.js
    -> PostAction.js
    -> types.js --> all types related to actions
    ...
reducers
    -> UserReducer.js
    -> PostReducer.js
    -> types.js --> all types related to reducers
    ...
models
    -> User.js --->
    -> Post.js --->
    -> types.js --> all types related to models
    ...
components
containers

因此，我只是想就如何以更可持续和可读的方式组织flowtype 获得意见。谢谢

Answer 1

首先，我想明确一下术语； flow-typed 和 flow types 是两个不同但相关的概念。

在这种情况下，我们一般谈论的是 flow types，而不是 flow-typed，后者是一个在概念上类似于 TypeScript 的绝对类型存储库的类型存储库。

流类型是要在库中使用的导出类型，因此可以使用多种不同的方式来组织它们。这部分是由于在使用类型之前需要导入类型，所以在文件的顶部。因此，在某些情况下，将它们组织在文件之外是有意义的。这与处理常量的方式类似。

第一个示例选择将每种类型保留在各自的类中，这适用于大多数情况，但会在较大的项目中促进循环依赖。此选项需要管理的源文件较少，这对较小的项目是有利的。

第二个示例选择为每个构造导出类型；例如：所有动作一起导出它们的类型。这减少了循环依赖的机会，并明确了从哪里导入类型。对于较大的项目，我建议使用此选项。

而不是：

import type { FooType } from './foo';
import type { BarType } from './bar';

我们可以：

import type { FooType, BarType } from './types';