如何将 TypeScript 添加到现有的 Vite (React) 应用程序中？

Question

我有一个使用 Vite 创建的现有 React 应用程序。我在Vite中使用了react模板-

yarn create vite my-react-app --template react

随着项目的进展，包含 TypeScript 来进行更严格的类型检查似乎是个好主意。早些时候，在这份清晰的文档的帮助下，我使用 create-react-app 将 TypeScript 添加到了我的现有项目之一中。我尝试将相同的内容合并到我的 Vite 应用程序中。我在终端中执行了以下代码 -

yarn add typescript @types/node @types/react @types/react-dom @types/jest

我将 .jsx 文件重命名为 .tsx，将 vite.config.js 重命名为 vite.config.ts，并重新启动了我的 vite 服务器。

但令我非常沮丧的是，该应用程序停止工作了。我在vite 文档中找不到任何有关将 TypeScript 添加到现有应用程序的文档。我也在Vite Github社区中进行了搜索，但没有找到任何相关内容。我在网上也找不到与此相关的任何内容。大部分内容都在 CRA 和 Typescript 上。

对此的任何帮助将不胜感激。谢谢！

Answer 1

我也在其他各种论坛上问过这个问题。几天前我得出了正确的答案，并想在这里分享。

首先，安装 TypeScript 以及 React 和 React-dom 的类型，

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

接下来，将vite.config.js文件重命名为vite.config.ts.

第三，按如下方式配置 tsconfig.json，

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

，和 tsconfig.node.json，

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

vite-env.d.ts接下来，在文件夹中创建一个名为的文件src/，然后复制并粘贴以下内容（开头有三个斜杠）：

/// <reference types="vite/client" />

这会为 vite 客户端创建一个类型文件。

最后，在您的index.html中，将index.jsx的名称更改为index.tsx，如下所示：

<script type="module" src="/src/index.tsx"></script>

TypeScript 现在应该可以在您的 Vite React 项目上运行。

点击此链接查看Vite GitHub中的问答