Несколько сложное объявление компонента функции React с помощью 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