使用ts实现vue
使用 TypeScript 实现 Vue
在 Vue 项目中集成 TypeScript 可以显著提升代码的可维护性和开发体验。以下是实现方法：
创建支持 TypeScript 的 Vue 项目
使用 Vue CLI 或 Vite 创建新项目时选择 TypeScript 模板：
# Vue CLI
vue create my-project --default && vue add typescript
# Vite
npm create vite@latest my-project --template vue-ts配置 tsconfig.json
确保项目根目录下的 tsconfig.json 包含 Vue 相关配置：
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"strict": true,
"jsx": "preserve",
"moduleResolution": "node",
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
},
"include": ["src//*.ts", "src//*.d.ts", "src//*.tsx", "src//*.vue"],
"exclude": ["node_modules"]
}单文件组件写法
在 .vue 文件中使用 TypeScript：
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
name: 'MyComponent',
props: {
msg: {
type: String,
required: true
}
},
data() {
return {
count: 0
}
},
methods: {
increment(): void {
this.count++
}
}
})
</script>类型定义
为 Props 和 Emits 定义类型：
<script lang="ts">
import { defineComponent, PropType } from 'vue'
interface User {
id: number
name: string
}
export default defineComponent({
props: {
user: {
type: Object as PropType<User>,
required: true
},
onSelect: {
type: Function as PropType<(id: number) => void>,
required: true
}
}
})
</script>组合式 API 使用
在 setup 语法糖中使用 TypeScript：
<script setup lang="ts">
import { ref } from 'vue'
const count = ref<number>(0)
function increment(): void {
count.value++
}
</script>全局类型扩展
在 src/shims-vue.d.ts 中扩展全局类型：
declare module '*.vue' {
import { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}
declare module '@vue/runtime-core' {
interface ComponentCustomProperties {
$myGlobal: string
}
}工具函数类型
为工具函数添加类型注解：
// utils.ts
export function formatDate(date: Date | string): string {
// 实现逻辑
}Pinia 状态管理
使用 TypeScript 定义 store：
// stores/counter.ts
import { defineStore } from 'pinia'
interface CounterState {
count: number
}
export const useCounterStore = defineStore('counter', {
state: (): CounterState => ({
count: 0
}),
actions: {
increment() {
this.count++
}
}
})路由类型安全
为 Vue Router 添加类型支持：
// router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'Home',
component: () => import('../views/Home.vue')
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
