Как эта аннотация типа работает в коде React без TypeScript?

Question

Я смотрел этот пример кода на странице 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 не нужно передавать объект и разбивать его на части в теле функции.Вместо этого мы делаем секцию параметров функции pattern , чтобы нам вообще не нужно было беспокоиться об этой переменной h.Таким образом, мы могли бы переписать его следующим образом (способом, аналогичным вашему примеру):

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

Итак, точно так же, как и раньше, вы можете перейти к f любому объекту, имеющему свойства x и y, и он вернетмассив значений в этих свойствах.

Вот оно в действии:

> 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 в другом ответе, в рамках этого кода используются соглашения об использовании заглавных букв.

Answer 2

Это не аннотация типа.Это особенность ES6, которая называется параметры деструктурирования покоя :

Сначала рассмотрим этот пример: (назначение деструктуры)

const test = myObject.prop
// prop can be assigned in a variable
const { prop } = myObject
// but we want prop as a test variable
// and can be written as
const { prop: test } = myObject
// which is similar to first line
console.log(test)

Вот как мы можем передать параметры:

({ component, ...rest })

// We're giving component name as Component

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

Итак, вы можете использовать <Component />, поскольку вы знаете, что строчная <component /> недействительна в реакции.

---

Кроме того, я бы посоветовал вам глубоко погрузиться вследующие блоги:

Hackernoon: понимание задания по деструктуризации

JavaScript Info: назначение по деструктурированию

Codeburst: разрушениеполное руководство

Dev.to: назначение разрушения - массив

Dev.to: назначение разрушения - объект