Блог

На данный момент пытаюсь понять typescript.

В чем разница между:

 const App: React.FunctionComponent<CustomProps> = (props: CustomProps) => {
  return <div>Hello World!</div>;
};
 

и:

 const App = (props: CustomProps): React.FunctionComponent => {
  return <div>Hello World!</div>;
};
 

Второй выдает ошибку:

 src/App.tsx:19:3 - error TS2322: Type 'Element' is not assignable to type 'FunctionComponent<{}>'.
  Type 'Element' provides no match for the signature '(props: { children?: ReactNode; }, context?: any): ReactElement<any, any> | null'.
 

 const App: React.FunctionComponent<CustomProps> = (props: CustomProps)
 

означает, что App это тип React.FunctionComponent<CustomProps>

 const App = (props: CustomProps): React.FunctionComponent
 

означает, что у вас App есть тип any , потому что вы не назначили тип, но он возвращает объект типа React.FuctionComponent

Ошибка означает, что вы возвращаете a JSX.Element , и вы сказали, что функция возвращает a FunctionComponent

Правильный код :

 const App: React.FunctionComponent<CustomProps> = (props: CustomProps): JSX.Element => {
  return <div>Hello World!</div>;
};
 

Кроме того, вы можете напрямую видеть, какой тип возвращается вашей функцией, если вы ничего не пишете в возвращаемом типе. Если у вас есть VS code, вы можете навести курсор мыши на свою функцию, и она отобразит то, что она возвращает, благодаря intellisense