Generi c тип реквизита стрелка

Question

Меня немного смущает "закулисность" следующего синтаксиса const MyComponent: FC<RouteComponentProps> = ({history}) => { }; Я видел много таких примеров и понимаю, что он устанавливает тип FC<RouteComponentProp> для объекта props, передаваемого в MyComponent.

Я, однако, запутался - могу ли я получить тот же логический результат типа реквизита с другим синтаксисом? Могу ли я написать что-то вроде -

const MyComponent = (FC<RouteComponentProps>:{}) => {}.

Пожалуйста, спасибо.

Answer 1

Вот определение F C или FunctionComponent:

interface FunctionComponent<P = {}> {
  (props: PropsWithChildren<P>, context?: any): ReactElement | null;
  propTypes?: WeakValidationMap<P>;
  contextTypes?: ValidationMap<any>;
  defaultProps?: Partial<P>;
  displayName?: string;
}

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

import React, { PropsWithChildren } from 'react';

// ...

const MyComponent = (props: PropsWithChildren<RouteComponentProps>): ReactElement | null => {

}

PropsWithChildren - это вспомогательный тип, который добавляет в стандартную реактивную опору children, которую могут использовать все компоненты. PropsWithChildren<RouteComponentProps> - это то же самое, что и RouteComponentProps & { children?: ReactNode }

---

Но, как вы видели в определении для FunctionComponent, происходит нечто большее, чем просто реквизит. Компоненты могут иметь ряд свойств c. propTypes и displayName используются для разработки и отладки, contextTypes используется для старого контекста API, а defaultProps - это способ задания значений по умолчанию для реквизита.

Вы не можете использовать эти часто, но они возможны, и если вы когда-нибудь захотите их использовать, вам нужно обновить свой тип, чтобы разрешить их. Или просто используйте FC<RouteComponentProps> и достаньте все из коробки.