#reactjs #typescript
#reactjs #typescript
Вопрос:
const withAuth = () => <OriginalProps extends {}>(
Component: React.ComponentType<OriginalProps amp; IAuthContextInterface>
) => { }
(withAuth()(PrivateRoute)) // this is how the HOC called
Может ли кто-нибудь объяснить это объявление функции в терминах непрофессионала? Я знаю, что это HOC, но что такое OriginalProps? синтаксис неясен?
Я не буду уточнять, удален ли OriginalProps,
const withAuth = () => (
Component: React.ComponentType<OriginalProps amp; IAuthContextInterface>
) => { }
Комментарии:
1. Это способ вывести тип реквизита из обернутого компонента без явного указания типа реквизита при
withAuth
вызове. См . typescriptlang.org/docs/handbook /… . Это не относится конкретно к React. Является лиReact.ComponentType<OriginalProps amp; IAuthContextInterface>
подходящий тип дляComponent
или нет, зависит от вашего случая.
Ответ №1:
То, что вы видите, является универсальной функцией и OriginalProps
является переменной типа или параметром типа.
Важно!Прежде чем продолжить, прочитайте приведенную выше ссылку, чтобы сначала понять концепцию generic. Базовое понимание generic является необходимым условием для следующего объяснения.
Синтаксис немного запутан из-за лаконичности функции arrow, давайте преобразуем его обратно в старую школу function
.
function withAuth() {
return function<OriginalProps extends {}>(Component: React.ComponentType<OriginalProps amp; IAuthContextInterface>) { ... }
}
Вы указываете параметры универсального типа в паре заостренных скобок <typeParam1, typeParam2>
. Имена параметров выбираются произвольно. Соглашение в TS заключается в использовании только заглавных букв, например T, A, B
. Это то, что вы обычно видите.
Здесь автор решает дать ему более осмысленное название OriginalProps
. Давайте также преобразуем его в обычный T
и избавимся от extends {}
ограничений.
function withAuth() {
return function<T>(Component: React.ComponentType<T amp; IAuthContextInterface>) { ... }
}
Теперь должно быть ясно, withAuth
это функция, которая возвращает анонимную функцию. Эта анонимная функция также является универсальной функцией, которая принимает один параметр типа, который выводится из типа Component
параметра.
Все это выглядит так:
- У нас есть этот
T
параметр типа, значение типа которого мы еще не знаем, но оно связано со значением типаComponent
. - Мы требуем, чтобы тип
Component
параметра былReact.ComponentType<Something>
, но этоSomething
еще предстоит узнать. - Когда мы вызываем
withAuth()(PrivateRoute)
, мы можем знать, чтоSomething
изPrivateRoute
. - Также, учитывая, что мы уже знаем
IAuthContextInterface
, мы можем узнать точное значение типаT
, точно так же, как решение уравнения:
Something = T IAuthContextInterface
=> T = Something - IAuthContextInterface
// here =, , - signs are just analogue, not real typescript operators
Комментарии:
1. Спасибо @hackape. Имеет смысл!