vite 配置 typescript 环境

要在 Vite 项目中配置 TypeScript 环境，你需要遵循几个步骤来确保 TypeScript 被正确设置并可以与 Vite 一起工作。以下是一个基本的指南：

1. 初始化项目

如果你还没有初始化项目，可以使用 npm 或 yarn 初始化一个新的项目：

npm init -y
# 或者
yarn init -y

2. 安装必要的依赖

你需要安装 Vite、TypeScript 以及 Vite 的 TypeScript 插件：

npm install vite typescript @vitejs/plugin-vue-jsx --save-dev
# 或者
yarn add vite typescript @vitejs/plugin-vue-jsx -D

注意：如果你正在开发一个 Vue 3 项目，并且想使用 Vue 的 JSX 支持，你可能需要安装 @vitejs/plugin-vue-jsx。否则，你可能不需要这个插件。
3. 配置 Vite

在项目的根目录下创建一个名为 vite.config.js 或 vite.config.ts 的文件（取决于你是否想使用 TypeScript 来编写配置文件）。在这个文件中，你需要配置 Vite 以使用 TypeScript。但是，对于基本的 TypeScript 支持，你可能不需要添加任何特定的插件或配置，因为 Vite 默认就支持 TypeScript。

然而，如果你想添加一些特定的配置，例如为 TypeScript 设置别名或路径解析，你可以这样做：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],resolve: {alias: {// 设置 TypeScript 的别名'@/': '/src/'}}
})

4. 配置 TypeScript

在项目的根目录下创建一个名为 tsconfig.json 的文件，并添加以下基本配置：

{"compilerOptions": {"target": "esnext","module": "esnext","strict": true,"jsx": "preserve","importHelpers": true,"moduleResolution": "node","experimentalDecorators": true,"skipLibCheck": true,"forceConsistentCasingInFileNames": true,"esModuleInterop": true,"allowSyntheticDefaultImports": true,"sourceMap": true,"baseUrl": ".","types": ["vite/client"// 其他你需要的类型定义],"paths": {"@/*": ["src/*"]},"lib": ["esnext","dom","dom.iterable","scripthost"]},"include": ["src/**/*.ts","src/**/*.tsx","src/**/*.vue","tests/**/*.ts","tests/**/*.tsx"],"exclude": ["node_modules"]
}

这个配置告诉 TypeScript 如何编译你的代码，包括目标 ES 版本、模块系统、严格模式选项等。它还告诉 TypeScript 在哪里查找类型定义和源文件。
5. 编写 TypeScript 代码

现在，你可以在你的项目中编写 TypeScript 代码了。确保你的文件扩展名是 .ts 或 .tsx（对于包含 JSX 的文件）。
6. 运行和构建你的项目

使用 Vite 的命令来运行和构建你的项目：

# 运行开发服务器
npm run dev
# 或者
yarn dev# 构建生产版本
npm run build
# 或者
yarn build

确保你的 package.json 文件中的 scripts 部分包含了这些命令的正确配置。