App:React之间的区别是什么.FunctionComponent和App=():React.功能组件

Question

目前正在尝试理解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'.

Answer 1

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

意味着App是React.FunctionComponent<CustomProps>的一种类型

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

意味着你的App是any的类型，因为你没有分配类型，但它返回了React.FuctionComponent类型的对象

这个错误意味着你返回了一个JSX.Element，而你说函数返回了FunctionComponent

正确的代码是：

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

此外，如果不在返回类型上写入任何内容，则可以直接查看函数返回的类型。如果你有VS代码，你可以把鼠标悬停在你的函数上，它会显示它返回的内容，这要归功于intellisense