本课程完全用 JavaScript 编写，但你也可以使用 TypeScript 与 React Three Fiber 结合使用。

TypeScript 是 JavaScript 的一个超集，为该语言添加了类型。它是一种在早期捕获错误并通过自动完成和文档提高开发者体验的绝佳方式。

是否使用 TypeScript 由你决定。为了帮助你做出决定，这里有一些问题需要考虑：

• 你正在构建的项目类型：你是在起草一个 3D 体验，还是有意将其发布？项目是小型的还是大型的？是否计划长期维护？
• 你的团队：你是自己一个人工作还是与他人合作？与注释类似，类型是让你的代码对他人更易于理解的好方法。

没有对错的答案，决定权在于你选择哪个最适合你的项目。由于该库是用 TypeScript 编写的，即使使用 JavaScript 也可以从中受益。

我们将一起看看如何轻松地将我们的入门项目转换为 TypeScript，以及如何与 React Three Fiber 配合使用。

但这节课不是 TypeScript 教程，如果你没有经验并希望了解更多内容，应该从这里开始。

设置

在设置课程中，我们使用 Vite 从头创建了一个新项目。如果你正在启动一个新项目，可以遵循相同步骤，并选择你的项目的 TypeScript 版本，而不是 JavaScript 版本。（不要忘记回来这里看看如何使用它 🤭）

现在我们来看看如何将现有项目转换为 TypeScript。

入门项目与 设置课程 的最终结果相同，但步骤对任何项目都是一致的。

安装 TypeScript

首先，我们需要在项目中安装 TypeScript。可以使用以下命令进行安装：

Copy
yarn add -D typescript

-D 会将 TypeScript 作为开发依赖安装。（因为它在最终产品构建中并不需要）

TypeScript 为我们的构建流程增加了一个新步骤。我们需要在运行项目之前，将 TypeScript 文件编译为 JavaScript。为此，我们需要将 package.json 中的构建脚本更新为以下内容：

Copy
"build": "tsc && vite build"

tsc 命令会将我们的 TypeScript 文件编译为 JavaScript，vite build 命令则会像往常一样构建我们的项目。

我们文件的扩展名将变为 .tsx 而不是 .jsx，.ts 而不是 .js。同样在 package.json 文件中，我们可以调整 lint 脚本来考虑到这一点：

Copy
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",

TypeScript 配置

我们需要在项目根目录创建一个 tsconfig.json 文件来配置 TypeScript：

Copy
{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

以及一个 tsconfig.node.json：

Copy
{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

这些是使用 Vite 的 React 项目的默认选项。有关更多信息，您可以在 编译器选项文档页 查找。

ESLint 配置

我们需要更新 .eslintrc.cjs 文件以考虑 TypeScript：

Copy
module.exports = {
  env: { browser: true, es2020: true },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react/jsx-runtime",
    "plugin:@typescript-eslint/recommended",
    "plugin:react-hooks/recommended",
    "plugin:@react-three/recommended",
  ],
  parser: "@typescript-eslint/parser",
  settings: { react: { version: "18.2" } },
  plugins: ["react-refresh"],
  rules: {
    "react-refresh/only-export-components": "warn",
  },
};

它需要两个新的包：

Copy
yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser