当前位置：首页 > VUE

使用ts实现vue

2026-01-14 06:58:51VUE

使用 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

使用ts实现vue