node.js - babel 未剥离流程的类型提示

Question

我有一个 React.JS 项目，它使用带有 UI 组件的自定义“主题”。该主题还提供构建脚本(webpack 配置、babel 配置等)。

我想在这个项目中开始使用 Flow。我安装了所需的 npm 包，并将 flow 添加到 babel 的预设中，然后将 props = {mytestprop: string} 添加到我的 React` 类之一。

Webpack 成功编译了我的代码，但类型提示没有被删除!当然，浏览器无法执行此代码 - 当我尝试运行它时，它会引发ReferenceError:字符串未定义。

.babelrc 中的当前预设列表为:["es2015", "react", "stage-2", "flow"]。我确信这是 babel 使用的实际列表，因为如果我删除前 3 个预设中的任何一个，编译就会失败。

您对剥离 Flow 类型时可能导致此行为的原因有什么想法吗？

Answer 1

并不是类型注释没有被剥离。这是因为 { mytestprop: string } 不是赋值右侧的有效类型注释，因为它与定义对象的语法冲突。

具体来说，当 Flow 的解析器看到语句 { mytestprop: string } 时，它会将其解释为尝试创建一个带有名为 mytestprop 的字段并设置了值的对象到变量 string 的值，因此它将保持语句原样，并且您将收到在浏览器中看到的错误。

键入对象声明的正确方法是键入声明的左侧。

例如，

let myProps: { myTestProp: string } = { myTestProp: "testProp" };

如果您没有单独声明 props，则可以声明自定义类型:

type myPropType = { myTestProp: string }
// ...
const myComponent = (props: myPropType) => //render your component

由于 type 语句是 Flow 独有的，并且不是有效的 JavaScript 语句，因此它将被正确剥离。