javascript - 在没有TypeScript的情况下，这种类型注释如何在React代码中工作？

我正在看ReactRouter页面上的this code example，这很有趣：

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      fakeAuth.isAuthenticated ? (
        <Component {...props} />
      ) : (
        <Redirect
          to={{
            pathname: "/login",
            state: { from: props.location }
          }}
        />
      )
    }
  />
);

component: Component部分看起来像类型注释。当我将这个示例放到一个空文件中时，Webstorm并没有抱怨，但是我没有看到它们使用Flow或TypeScript或导入中的任何东西。

JavaScript已经有类型注释了吗？当我搜索时，我在MDN上没有看到任何关于此的信息，而且React也不自动从我学到的内容中提供类型注释。

最佳答案

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

这是一个易于理解的函数：

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

函数f接收对象h并返回包含h.x和h.y的数组。现在，在现代JavaScript中，不必传递对象并将其在函数体内分解。取而代之的是，我们将函数的参数部分设置为模式，这样就完全不必理会该h变量了。因此，我们可以像这样重写它（与您的示例类似）：

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

因此，就像以前一样，您可以将具有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]

但是正如@BhojendraRauniyar在另一个答案中所写的那样，使用此代码的框架中存在大写约定。