创建使用流类型并公开类型的 JS 库答案

【问题标题】：Creating JS library that uses flow type and exposes types创建使用流类型并公开类型的 JS 库
【发布时间】：2020-01-02 00:03:53
【问题描述】：

我正在编写一个将由第 3 方使用的库。我选择 flowtype 作为打字系统（出于我的组织的特定原因）。该库公开了带注释的 React 组件。

该库使用 flowtype 进行注释。我还希望能够在其他带有流类型的代码中使用它。我在库中创建了index.flow.js 并将以下内容放入其中：

// @flow

import type MyComponent from './components/my-component'

export default MyComponent

// some other types follow
...

当我尝试在不同的代码库中使用该库时，类型“不起作用”。例如，如果我将无效的 prop 传递给组件，则类型系统不会抛出任何错误。我的代码库也是使用 flowtype 输入的。

我应该在库的 index.flow.js 文件中的组件中声明我的 React 吗？这看起来很尴尬，因为现在我必须在两个地方（组件本身和流文件）维护类型。

我认为流程默认情况下有效。由于我的 React 组件是类型化的并且库正在公开index.flow.js，它会识别出该组件具有特定的道具、状态等类型，但它没有。

【问题讨论】：

【解决方案1】：

所以经过一些研究，我得出结论，有两种方法：

1。公开单个定义文件

确保创建与您的分发 JS 文件名相同的定义文件。这意味着如果您有库 lib-a 和捆绑文件 lib-a.js，请将定义文件命名为 lib-a.js.flow。按照 creating library definitions 上的 Flow 文档了解如何正确定义您的模块。

使用这种方法，您需要在其中声明整个模块。这意味着如果你有一个类MyComponent，你需要在这里再次定义它。

我不喜欢这种方法，因为一切都需要在一个地方。然后，在您的源代码中，您需要从定义文件中导入类型，这样您就不会最终重复类型定义。这不是很好，例如在 React 中，你最终会从主定义文件中导入 Props 类型，这使得它的可读性降低，而不是内联类型。我猜这种方法对于小型库来说可能很好。

使用这种方法，您基本上可以将所有未转译/未捆绑的源代码与分发文件一起复制。这些文件将以 *.flow 扩展名结尾，这意味着 Flow 只会选择这些文件进行类型分析。阅读this article 了解如何使其工作。

简而言之，你基本上：

安装flow-copy-source 作为开发依赖项
将此添加到package.json：
```
"build:flow": "flow-copy-source -v -i '**/__tests__/**' src lib"
```
src 是您的源代码文件夹，lib 是您的分发文件的文件夹，这些文件最终会被使用（并且可能在 npm 存储库中）。

有人可能会争辩说这种方法是“hacky”并且污染了分发包。我同意，这不是很干净的解决方案，但可能是迄今为止我发现的最好的解决方案。请阅读提供的文章和 cmets，以更深入地了解您还可以做什么。

我遇到过this Github thread 正在讨论这个确切问题的地方。 gen-flow-files 似乎即将被删除，而我使用的方法是目前的前进方向。

【讨论】：