当前位置：首页 > VUE

使用ts实现vue

2026-01-08 07:51:11VUE

使用 TypeScript 实现 Vue 应用

要在 Vue 项目中使用 TypeScript，可以通过 Vue CLI 或手动配置 TypeScript 环境。以下是具体方法：

通过 Vue CLI 创建 TypeScript 项目

运行以下命令创建支持 TypeScript 的 Vue 项目：

vue create my-vue-app

在提示中选择 "Manually select features"，勾选 TypeScript 选项。

手动配置 TypeScript

在现有 Vue 项目中安装 TypeScript 和相关依赖：

npm install --save-dev typescript @vue/cli-plugin-typescript

配置 tsconfig.json：

{
  "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 编写 Vue 单文件组件（.vue 文件）：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="increment">Count: {{ count }}</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'MyComponent',
  setup() {
    const message = 'Hello Vue with TypeScript'
    const count = ref(0)

    const increment = () => {
      count.value++
    }

    return {
      message,
      count,
      increment
    }
  }
})
</script>

类型定义

为 Vue 组件创建类型定义：

// src/types/user.d.ts
interface User {
  id: number
  name: string
  email: string
}

在组件中使用类型：

<script lang="ts">
import { defineComponent } from 'vue'
import type { User } from '@/types/user'

export default defineComponent({
  setup() {
    const user: User = {
      id: 1,
      name: 'John Doe',
      email: 'john@example.com'
    }

    return { user }
  }
})
</script>

Vuex 与 TypeScript

创建类型化的 Vuex store：

// src/store/index.ts
import { createStore } from 'vuex'

interface State {
  count: number
}

export default createStore({
  state: (): State => ({
    count: 0
  }),
  mutations: {
    increment(state: State) {
      state.count++
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  getters: {
    doubleCount: (state: State) => state.count * 2
  }
})

路由与 TypeScript

配置类型化的 Vue Router：

// src/router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/Home.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

使用ts实现vue