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

Question

我正在查看this code example在 ReactRouter 页面上，这篇文章很有趣:

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 也不会自动提供类型注释......

Answer 1

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

这是一个很容易理解的函数:

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 在另一个答案中所写，此代码所使用的框架中有大写约定。