Javascript 在没有TypeScript的React代码中，这个类型注释是如何工作的？_Javascript_Reactjs_React Router

Javascript 在没有TypeScript的React代码中，这个类型注释是如何工作的？

javascript reactjs

Javascript 在没有TypeScript的React代码中，这个类型注释是如何工作的？,javascript,reactjs,react-router,Javascript,Reactjs,React Router,我正在看ReactRouter页面，这篇文章很有趣： const PrivateRoute=（{component:component，…rest}）=>( 伪造的。是否已验证( ) : ( ) } /> ); component:component零件看起来像一个类型注释。当我把这个例子放到一个空文件中时，Webstorm没有抱怨，但我没有看到他们在导入中使用Flow、TypeScript或任何东西 JavaScript已经有类型注释了吗？当我搜索时，在MDN上没有看到任何与此相关的内容，而

我正在看ReactRouter页面，这篇文章很有趣：

const PrivateRoute=（{component:component，…rest}）=>(
伪造的。是否已验证(
) : (
)
}
/>
);

component:component

零件看起来像一个类型注释。当我把这个例子放到一个空文件中时，Webstorm没有抱怨，但我没有看到他们在导入中使用Flow、TypeScript或任何东西

JavaScript已经有类型注释了吗？当我搜索时，在MDN上没有看到任何与此相关的内容，而且React也没有自动提供类型注释，从我所了解的内容来看…

它不是类型注释。这是一个ES6功能，名为：

首先考虑这个例子：（破坏赋值）

这是我们传递参数的方式：

({ component, ...rest })

// We're giving component name as Component

({ component: Component, ...rest })

所以，您可以使用

，因为您知道小写组件

在react中无效

此外，我建议您深入阅读以下博客：

它不是类型注释。这是一个ES6功能，名为：

首先考虑这个例子：（破坏赋值）

这是我们传递参数的方式：

({ component, ...rest })

// We're giving component name as Component

({ component: Component, ...rest })

所以，您可以使用

，因为您知道小写组件

在react中无效

此外，我建议您深入阅读以下博客：

您看到的不是类型注释，而是对象模式中的属性。让我们简化您的示例以帮助了解发生了什么

下面是一个易于理解的函数：

f = (h) => [h.x, h.y]

函数

接收一个对象

，并返回一个带有

h.x

和

h.y

的数组。现在，在现代JavaScript中，不必传入对象并在函数体中将其分解。相反，我们将函数的参数部分设置为一个模式，这样我们就根本不需要处理

变量。因此，我们可以这样重写它（以与您的示例类似的方式）：

所以，和前面一样，您可以将任何具有x和y属性的对象传递给f，它将在这些属性处返回一个值数组

这就是它的作用：

> f = (h) => [h.x, h.y]
[Function: f]
> f({x:1, y:2, z:3})
[ 1, 2 ]
> f = ({x: xValue, y: yValue}) => [xValue, yValue]
[Function: f]
> f({x:1, y:2, z:3})
[ 1, 2 ]

另一方面，通常会跳过

xValue

和

yValue

部分，并具有：

f = ({x: x, y: y}) => [x, y]

由于简写属性符号，其仅为：

f = ({x, y}) => [x, y]

但正如@bhojendraurauniyar在另一个答案中所写的那样，这段代码所使用的框架中有大写惯例。