在没有 TypeScript 的情况下，这种类型注释如何在 React 代码中工作? [英] How is this type annotation working in React code without TypeScript?

问题描述

我正在 ReactRouter 页面上查看此代码示例，这件作品很有趣:

I was looking at this code example on the ReactRouter page, and this piece is interesting:

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 或导入中的任何东西.

The component: Component part looks like a type annotation. Webstorm didn't complain when I put this example into an empty file, but I didn't see them using Flow or TypeScript or anything in the imports.

JavaScript 已经有类型注解了吗?当我搜索时，我在 MDN 上没有看到任何关于此的内容，而且 React 也不会根据我学到的内容自动提供类型注释...

Does JavaScript have Type Annotation already? I didn't see anything on MDN about this when I searched, and also React doesn't automatically provide type annotation either from what I learned...

推荐答案

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

What you are seeing is not a type annotation, but a property in an object pattern. Let's simplify your example to help see what is going on.

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

Here's a function that is easy to understand:

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

函数f 接受一个对象h 并返回一个带有h.x 和h.y 的数组.现在，在现代 JavaScript 中，不必传入一个对象并在函数体中将其全部分解.相反，我们使函数的参数部分成为一个模式，这样我们就根本不需要理会那个h 变量.所以我们可以像这样重写它(以与您的示例相似的方式):

The function f takes in an object h and returns an array with h.x and h.y. Now in modern JavaScript one does not have to pass in an object and break it all apart in the function body. Instead, we make the parameter section of the function be a pattern so that we don't need to bother with that h variable at all. So we could rewrite it like this (in a way that parallels your example):

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

因此，就像以前一样，您可以将任何具有 x 和 y 属性的对象传递给 f，它会返回这些属性的值的数组.

So, exactly like before, you can pass to f any object that has x and y properties and it will return an array of the values at those properties.

这是在行动:

> 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 部分并具有:

As an aside, normally one would skip the xValue and yValue part and have:

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

由于简写的属性符号只是:

which due to shorthand property notation is just:

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

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

but as @BhojendraRauniyar writes in another answer, there are capitalization conventions in the framework this code is being used with.

这篇关于在没有 TypeScript 的情况下，这种类型注释如何在 React 代码中工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！