225 - 《React + TypeScript 最小知识集》

1、props 类型不要用 React.FC 写法，因为早已不推荐，确定包括不能于泛型一起工作、不能与 defaultProps 一起工作等，用正常的函数参数声明即可。如果对返回值有更严格的要求，可以加 JSX.Element 或 React.ReactElement 返回值类型。

type FooProps = { bar: string };
const Foo = (props: FooProps) => <div />;
const Foo = (props: FooProps): JSX.Element => <div />;
// 不推荐
const Foo: React.FC<FooProps> = (props) => <div />;

2、useState 能推断出类型时不用加类型，不能推断时用泛型加类型。

// 可以推断
useState(false);
useState([1,2,3]);
// 不能推断
useState<string[]>([]);

3、useEffect 不需要额外处理类型。

4、自定义 Hooks 是普通函数，按照函数的方式处理类型即可。

5、JSX 事件有 inline 和提取函数两种写法，前一种无需处理类型，后一种需要声明 event 类型。这个 event 声明这么长，怎么记呢？要么 google 搜索，要么通过 inline 的方式写一个 e =>，这时编辑器会提示 e 的类型，复制粘贴即可。

// inline 方式
<button onClick={e => e.preventDefault()}>Go</button>
// 提