Советы по TypeScript и React

Как использовать дочернюю опору «React.FC» в React 18 с TypeScript

Как работать с новым типом React 18 «React.FC» и реквизитом «children» для TypeScript

🇫🇷 Эта статья доступна на французском языке в блоге Coding Spark вместе с некоторыми интересными вещами!

Используя новый тип компонента React.FC в уже существующем проекте, вы можете столкнуться со следующей ошибкой:

Property ‘children’ does not exist on type <YourCustomTypeProps>

Это связано с тем, что подпись типа изменилась в последней версии React.

Почему изменилась подпись FC?

Свойство children было удалено из React.FunctionComponent (React.FC), поэтому вы должны явно объявить его в свойствах вашего компонента.

TLDR; это предотвращает такие ошибки:

const ComponentWithNoChildren: React.FC = () => <>Hello</>;
...
<ComponentWithNoChildren>
   // passing children is wrong since component does not accept any
   <UnusedChildrenSinceComponentHasNoChildren /> 
</ComponentWithNoChildren>

Таким образом, вы можете быть уверены, что используемый вами компонент обрабатывает дочерние элементы, даже улучшая вашу кодовую базу и качество.

Как играть с React.FC и детьми в React 18+

До

В предыдущей версии реквизит children уже был определен как необязательное свойство в типе React.FC.

import * as React from 'react';

type Props = {};
const Component: React.FC<Props> = ({children}) => {...}

После

В последней версии это было удалено. Теперь вы должны указать это явно в зависимости от ваших потребностей. Это может быть как необязательным, так и обязательным, это зависит от вашей собственной логики.

import * as React from 'react';

type Props = {
  children?: React.ReactNode
};
const Component: React.FC<Props> = ({children}) => {...}

Но что, если я хочу сохранить старый React.FC с дочерним поведением?

Вы можете переопределить типы реакции, создав файл определения пользовательского типа. Это может быть либо ваш уже существующий глобальный, либо вы можете создать новый с произвольным именем react.d.ts, который находится в области действия вашего компилятора TypeScript.

Следующее определение вернет тип к @types/react v17:

import * as React from '@types/react';

declare module 'react' {
  interface FunctionComponent<P = {}> {
    (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
  }
}

Теперь давайте насладимся определением строгого типа!

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn и Discord.