如何在现有 React 项目中添加 TypeScript - Web前端

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

npm install @types/React @types/React-DOM

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

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

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

在 React 组件中使用 TypeScript 

注意

每个包含 jsX 的文件都必须使用 .tsx 文件扩展名。这是一个 TypeScript 特定的扩展，告诉 Typescript 该文件包含 JSX。

使用 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>
  );
}

注意

这些沙盒可以处理 TypeScript 代码，但它们不运行类型检查器。这意味着你可以修改 TypeScript 沙盒以进行学习，但你不会收到任何类型错误或警告。要进行类型检查，你可以使用 TypeScript Playground 或使用更完整的在线沙盒。

这种内联语法是为组件提供类型的最简单方法，但是一旦你开始描述几个字段，它可能变得难以管理。相反，你可以使用 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，以及在 从类型创建类型 指南中参考更高级的用例。

标签：项目如何在WebTypeScriptReact