types的stream量提示没有被巴贝尔剥夺

我有一个使用UI组件的自定义“主题”的React.JS项目。 这个主题还提供了构build脚本（webpackconfiguration，babelconfiguration等）。

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

Webpack成功地编译了我的代码，但是types提示没有被剥离！ 当然，浏览器不能执行这个代码 – 当我尝试运行它时，会引发ReferenceError: string is not defined 。

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

你有什么想法可能导致这种行为剥离streamtypes？

Answer 1

这不是types的注释不被剥离。 这就是{ mytestprop: string }在赋值的右边不是一个有效的types注释 ，因为它与定义对象的语法冲突。

具体来说，当Flow的parsing器看到{ mytestprop: string }语句时，它会将其解释为尝试创build一个名为mytestprop的对象， mytestprop其值设置为variablesstring的值，因此它将单独保留该语句是的，你会得到你在浏览器中看到的错误。

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

例如，

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

如果你不是单独声明你的道具，你可以声明一个自定义types：

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

由于type语句是Flow专有的，而不是有效的JavaScript语句，所以它将被正确地剥离。