博客站

在 Vite 中使用 TypeScript 非常简单，Vite 提供了开箱即用的 TypeScript 支持。以下是详细步骤和配置说明：

1. 创建 Vite 项目并选择 TypeScript 模板

• 使用以下命令创建新项目并选择 TypeScript 模板：

  npm create vite@latest
  

• 按提示操作：
  1. 项目名称：输入项目名称。
  2. 选择框架：选择 Vue、React、Preact、Lit、Svelte 或 Vanilla。
  3. 选择变体：选择 TypeScript。

2. 安装依赖

• 进入项目目录并安装依赖：

  cd your-project-name
  npm install
  

3. 配置 tsconfig.json

• Vite 会自动生成 tsconfig.json 文件，你可以根据需要进行修改。
• 示例：

  {
    "compilerOptions": {
      "target": "ESNext",
      "useDefineForClassFields": true,
      "module": "ESNext",
      "moduleResolution": "Node",
      "strict": true,
      "jsx": "preserve",
      "sourceMap": true,
      "resolveJsonModule": true,
      "esModuleInterop": true,
      "lib": ["ESNext", "DOM"],
      "skipLibCheck": true
    },
    "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
  }
  

4. 编写 TypeScript 代码

• 在 src 目录下编写 TypeScript 代码。例如，创建一个 main.ts 文件：

  // src/main.ts
  import { createApp } from 'vue';
  import App from './App.vue';
  
  createApp(App).mount('#app');
  

5. 配置 Vite

• Vite 默认支持 TypeScript，无需额外配置。如果需要自定义配置，可以在 vite.config.ts 中进行。
• 示例：

  import { defineConfig } from 'vite';
  import vue from '@vitejs/plugin-vue';
  
  export default defineConfig({
    plugins: [vue()],
    build: {
      outDir: 'dist',
      assetsDir: 'assets',
    },
  });
  

6. 启动开发服务器

• 启动开发服务器：

  npm run dev
  

7. 构建生产环境

• 构建生产环境代码：

  npm run build
  

8. 使用 TypeScript 插件

• vite-plugin-checker：用于在开发过程中进行类型检查。
  • 安装：

    npm install vite-plugin-checker --save-dev
    

  • 配置：

    import { defineConfig } from 'vite';
    import vue from '@vitejs/plugin-vue';
    import checker from 'vite-plugin-checker';
    
    export default defineConfig({
      plugins: [
        vue(),
        checker({ typescript: true }), // 启用 TypeScript 类型检查
      ],
    });
    

9. 处理 TypeScript 类型定义

• 安装类型定义：如果需要使用第三方库的类型定义，可以通过 npm 安装。

  npm install @types/lodash --save-dev
  

• 使用类型定义：

  import _ from 'lodash';
  
  const result = _.chunk([1, 2, 3, 4], 2);
  console.log(result);
  

示例：完整的 Vite + TypeScript 项目

以下是一个完整的 Vite + TypeScript 项目示例：

1. 项目结构：

   vite-ts-project/
   ├── public/
   ├── src/
   │   ├── assets/
   │   ├── components/
   │   ├── App.vue
   │   └── main.ts
   ├── index.html
   ├── vite.config.ts
   ├── tsconfig.json
   └── package.json
   

2. vite.config.ts：

   import { defineConfig } from 'vite';
   import vue from '@vitejs/plugin-vue';
   import checker from 'vite-plugin-checker';
   
   export default defineConfig({
     plugins: [
       vue(),
       checker({ typescript: true }), // 启用 TypeScript 类型检查
     ],
     build: {
       outDir: 'dist',
       assetsDir: 'assets',
     },
   });
   

3. tsconfig.json：

   {
     "compilerOptions": {
       "target": "ESNext",
       "useDefineForClassFields": true,
       "module": "ESNext",
       "moduleResolution": "Node",
       "strict": true,
       "jsx": "preserve",
       "sourceMap": true,
       "resolveJsonModule": true,
       "esModuleInterop": true,
       "lib": ["ESNext", "DOM"],
       "skipLibCheck": true
     },
     "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
   }
   

总结

在 Vite 中使用 TypeScript 非常简单，Vite 提供了开箱即用的 TypeScript 支持。通过合理配置 tsconfig.json 和 vite.config.ts，可以充分利用 TypeScript 的类型检查和代码提示功能，提升开发效率和代码质量。