我的 React-TypeScript 速查表

自从我开始使用 TypeScript 以来，我就停不下来了。有时，找到正确的类型以及应该从哪里导入它真的让人头疼，尤其是在构建 ReactJS 应用程序时。这篇博文是一个很好的机会，可以公开记录我最常用的 React TypeScript 类型。我专注于函数式组件和 React Hooks。
文章的结构是每一段都是一个独立的技巧。

要创建 React TypeScript 项目，我们可以使用 Create React App：

npx create-react-app my-app --template typescript

关于如何正确导入 React，已经有很多讨论。以下是最新的方法：

import React from 'react';

函数组件的返回类型是ReactElement

import React, { ReactElement } from 'react';
const Component = (): ReactElement => {
  return <></>;
};

如果要扩展原生 HTML 元素的 props，可以使用通用 class HTMLAttributes。假设我想创建一个新按钮：

import React, { HTMLAttributes } from 'react';

interface MyButtonProps extends HTMLAttributes<HTMLButtonElement> {
  ...
}

const MyButton = (props: MyButtonProps): ReactElement => {
  return <button {...props} />
}

请注意，我们使用解构将道具转发给按钮元素。

children 道具的类型为ReactNode。

React 的事件系统使用其自身的类型，而不是原生的 HTML 事件。请确保从 React 库中导入该事件import { MouseEvent } from 'react'。

将正确的类型传递给useRef泛型。如果要创建对输入元素的引用：

import { useRef } from 'react';

const ref = useRef<HTMLInputElement | null>(null);

类型ref.current将自动为HTMLInputElement。

也同样如此useState。

import { useState } from 'react';

const [myState, setMyState] = useState<boolean | null>(null);

如果在两种情况下都提供了初始值，则类型将被隐式推断。

创建自定义钩子时，请务必明确设置返回类型。否则，TypeScript 可能会推断出错误的类型。

这远非一份完整的速查表，而是记录了我最常用的东西。查看这份很棒的速查表了解更多信息：https://github.com/typescript-cheatsheets/react。

每日在每个新标签页发布最棒的编程新闻。我们将为您筛选数百个优质来源，助您掌控未来。