Как эта аннотация типа работает в коде React без TypeScript?
Я смотрел этот пример кода на странице 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 не предоставляет автоматически аннотацию типа, исходя из того, что я узнал ...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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.info(test)
Вот как мы можем передать параметры:
({ component, ...rest })
// We're giving component name as Component
({ component: Component, ...rest })
Итак, вы можете использовать <Component />, поскольку вы знаете, что компонент нижнего регистра <component /> недействителен в реакции.
Кроме того, я бы посоветовал вам глубоко погрузиться в следующие блоги:
Hackernoon: понимание задачи деструктуризации
Информация о JavaScript: назначение деструктуризации
Codeburst: Destructuring assignment полное руководство
Вы видите не аннотацию типа, а свойство в шаблоне объекта. Давайте упростим ваш пример, чтобы понять, что происходит.
Вот функция, которую легко понять:
f = (h) => [h.x, h.y]
Функция f принимает объект h и возвращает массив с h.x и h.y. Теперь в современном JavaScript не нужно передавать объект и разбивать его на части в теле функции. Вместо этого мы делаем раздел параметров функции шаблон, чтобы нам вообще не нужно было беспокоиться об этой переменной 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 в другом ответе, в структуре, с которой используется этот код, есть соглашения о капитализации.
Это псевдоним ES6, значит, это действительный Javascript.