1. 基础配置准备

首先需要为项目添加TypeScript支持：

npm install --save-dev typescript @vue/compiler-sfc @types/node

2. 创建TypeScript配置文件

在项目根目录创建或修改tsconfig.json：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "types": ["vite/client"]
  },
  "include": ["src/​**​/*.ts", "src/​**​/*.d.ts", "src/​**​/*.tsx", "src/​**​/*.vue"],
  "exclude": ["node_modules"]
}

3. 修改vite配置

在vite.config.js中添加TypeScript支持：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  // 添加以下配置
  resolve: {
    alias: {
      '@': '/src'
    }
  }
})

4. 修改文件扩展名

可以逐步将.js文件改为.ts或.vue文件中的<script>标签添加lang="ts"属性：

<script setup lang="ts">
// TypeScript代码
</script>

5. 混合使用JS和TS

项目可以保持以下混合结构：

• 新编写的组件使用TypeScript

• 现有组件可以保持JavaScript不变

• 逐步将重要组件迁移到TypeScript