在 Vue 項目中配置 TypeScript（TS）可以提升代碼的類型安全性和開發體驗。以下是在 Vue 項目（基于 Vite）中配置 TypeScript 的詳細步驟和關鍵配置：
一、創建支持 TypeScript 的 Vue 項目
如果是新建項目，推薦直接使用官方模板創建：
bash
# npm
npm create vite@latest my-vue-ts-app -- --template vue-ts# yarn
yarn create vite my-vue-ts-app --template vue-ts# pnpm
pnpm create vite my-vue-ts-app -- --template vue-ts
進入項目并安裝依賴：
bash
cd my-vue-ts-app
npm install
二、現有 Vue 項目添加 TypeScript
如果需要在現有 Vue 項目中添加 TypeScript，按以下步驟操作：
1. 安裝必要依賴
bash
# 安裝 TypeScript 和 Vue 類型定義
npm install typescript @vuedx/typescript-plugin-vue vue-tsc -D# 安裝 Vue 3 的類型聲明
npm install @vue/runtime-core @vue/compiler-sfc -D
2. 創建 TypeScript 配置文件
在項目根目錄創建?tsconfig.json：
{"compilerOptions": {// 目標 ES 版本"target": "ESNext",// 模塊系統"module": "ESNext",// 模塊解析策略"moduleResolution": "Node",// 允許導入 JSON 文件"resolveJsonModule": true,// 啟用嚴格模式"strict": true,// 跳過庫文件類型檢查"skipLibCheck": true,// 允許從沒有默認導出的模塊中默認導入"allowSyntheticDefaultImports": true,// 保留 JSX 語法"jsx": "preserve",// 基礎 URL"baseUrl": ".",// 路徑別名（需與 Vite 配置同步）"paths": {"@/*": ["src/*"]},// 類型聲明文件"types": ["vite/client", "vue"],// 允許編譯 JS 文件"allowJs": true},// 需要編譯的文件"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],"exclude": ["node_modules"]
}
3. 配置 Vite 支持 TypeScript
修改?vite.config.ts（注意文件后綴改為?.ts）：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],resolve: {alias: {'@': path.resolve(__dirname, './src')}}
})
4. 創建類型聲明文件
在?src?目錄下創建?env.d.ts，用于聲明模塊類型：
/// <reference types="vite/client" />// 聲明 Vue 模塊
declare module '*.vue' {import type { DefineComponent } from 'vue'// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-typesconst component: DefineComponent<{}, {}, any>export default component
}// 聲明環境變量類型
interface ImportMetaEnv {readonly VITE_APP_TITLE: string// 更多環境變量...
}interface ImportMeta {readonly env: ImportMetaEnv
}
三、Vue 組件中使用 TypeScript
在 Vue 組件中使用 TypeScript 主要有兩種方式：
1. 使用?<script lang="ts">
vue
<script lang="ts">
import { defineComponent, ref } from 'vue'export default defineComponent({name: 'HelloWorld',props: {msg: {type: String,required: true}},setup(props) {const count = ref(0)const increment = () => {count.value++}return {count,increment}}
})
</script>
2. 使用?<script setup lang="ts">（推薦）
vue
<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue'// 定義 props 類型
const props = defineProps<{msg: stringcount?: number
}>()// 定義 emits 類型
const emit = defineEmits<{(e: 'change', value: number): void
}>()const num = ref(0)const handleClick = () => {num.value++emit('change', num.value)
}
</script>
四、關鍵配置說明
-
tsconfig.json?核心選項：strict: true：啟用嚴格類型檢查（推薦）paths：配置路徑別名，需與 Vite 中的?resolve.alias?保持一致include：指定需要編譯的文件范圍
-
類型聲明：
env.d.ts?用于聲明?.vue?文件和環境變量的類型- 第三方庫如果沒有類型定義，需要安裝對應的?
@types/xxx?包
-
組件 Props 類型定義：
- 使用?
defineProps<{...}>?進行類型定義（<script setup>?中） - 傳統方式使用?
props?選項配合?type?或?PropType
- 使用?
五、常見問題解決
-
找不到模塊 “*.vue” 或其相應的類型聲明：
- 確保?
env.d.ts?中包含了?.vue?模塊的聲明 - 檢查?
tsconfig.json?中的?include?配置是否包含?src/**/*.vue
- 確保?
-
路徑別名無法識別：
- 確保?
tsconfig.json?的?paths?和 Vite 配置的?alias?一致 - 安裝?
@types/node?以獲得路徑相關的類型支持：npm install @types/node -D
- 確保?
-
PropType 類型提示：
當需要復雜類型時，使用?PropType：typescript
import type { PropType } from 'vue'const props = defineProps({user: {type: Object as PropType<{name: stringage: number}>,required: true} })
通過以上配置，你的 Vue 項目就可以充分利用 TypeScript 的類型檢查功能，提升代碼質量和開發效率。更多細節可參考?Vue 官方 TypeScript 指南。
配置vue+ts項目時，vue.config.js文件中需要添加哪些內容？
如何在vue項目中使用TypeScript？
在vue項目中配置TypeScript時可能會遇到哪些問題？
