类型提示没有被 babel 剥离答案

【问题标题】：Type hints of flow not stripped by babel类型提示没有被 babel 剥离
【发布时间】：2017-09-23 04:26:20
【问题描述】：

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

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

Webpack 成功编译了我的代码，但是没有去掉类型提示！当然，浏览器无法执行这段代码——当我尝试运行它时，它会抛出ReferenceError: string is not defined。

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

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

【问题讨论】：

【解决方案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 语句，它将被正确剥离。

【讨论】：