48、深入探索 React、NestJS、GraphQL 和 Apollo

深入探索 React、NestJS、GraphQL 和 Apollo

1. TypeScript 函数式组件

1.1 基础示例

先来看一个基础示例：

import React from 'react';
export const HelloWorldTSFunctionalComponent = () => (
    <span>Hello world from our TS Functional Component</span>
);

这是一个最简单的基于 TypeScript 的函数式组件，与纯 JavaScript 组件看起来没太大区别。我们也可以添加类型，如使用 FC<Props> 作为组件类型， JSX.Element 作为组件函数的返回类型，但这并不会带来实际帮助，反而会降低代码的可读性。例如：

import React, {FC} from 'react';
type Props = {};
export const HelloWorldTSFunctionalComponent: FC<Props> = (): JSX.Element => (
    <span>Hello world from our TS Functional Component</span>
);

在实际开发中