如何在现有 React 项目中添加 TypeScript

使用下面命令安装最新版本的 React 类型定义：

npm install @types/react @types/react-dom

然后在 tsconfig.json 中设置以下编译器选项：

1. 必须在 lib 中包含 dom（注意：如果没有指定 lib 选项，默认情况下会包含 dom）。

2. jsx 必须设置为一个有效的选项。对于大多数应用程序，preserve 应该足够了。 如果你正在发布一个库，请查阅 jsx 文档 以选择合适的值。

在 React 组件中使用 TypeScript 

使用 TypeScript 编写 React 与使用 JavaScript 编写 React 非常相似。与组件一起工作时的关键区别是，你可以为组件的 props 提供类型。这些类型可用于正确性检查，并在编辑器中提供内联文档。

以 快速入门 指南中的 MyButton 组件 为例，我们可以为按钮的 title 添加一个描述类型：

function MyButton({ title }: { title: string }) {
  return (
    <button>{title}</button>
  );
}

export default function MyApp() {
  return (
    <div>
      <h1>欢迎来到我的应用</h1>
      <MyButton title="我是一个按钮" />
    </div>
  );
}

这种内联语法是为组件提供类型的最简单方法，但是一旦你开始描述几个字段，它可能变得难以管理。相反，你可以使用 interface 或 type 来描述组件的 props：

interface MyButtonProps {
  /** 按钮文字 */
  title: string;
  /** 按钮是否禁用 */
  disabled: boolean;
}

function MyButton({ title, disabled }: MyButtonProps) {
  return (
    <button disabled={disabled}>{title}</button>
  );
}

export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton title="我是一个禁用按钮" disabled={true}/>
    </div>
  );
}

描述组件 props 的类型可以根据需要变得简单或复杂，但它们应该是使用 type 或 interface 描述的对象类型。你可以在 对象类型 中了解 TypeScript 如何描述对象，但你可能还对使用 联合类型 描述可以是几种不同类型之一的 prop，以及在 从类型创建类型 指南中参考更高级的用例。