在Vue中使用TypeScript的幾種方式

更新時間：2026年05月26日 10:11:38 作者：穆金秋

本文主要介紹了在Vue中使用TypeScript的幾種方式,包括通過<script lang="ts">結合defineComponent,使用Composition API + <script setup lang="ts">和TypeScript定義Props和Emits類型,下面就來詳細的介紹一下

在 Vue 中使用 TypeScript 的幾種方式

1.使用<script lang="ts">

<template>
  <div>{{ message }}</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  data() {
    return {
      message: 'Hello TypeScript!' as string
    }
  },
  methods: {
    greet(name: string): string {
      return `Hello, ${name}!`
    }
  }
})
</script>

2.使用 Composition API +<script setup lang="ts">（推薦）

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

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

// 類型推斷
const count = ref(0) // 自動推斷為 Ref<number>
const message = ref('Hello') // 自動推斷為 Ref<string>

// 顯式類型聲明
const user = ref<{ name: string; age: number }>({
  name: 'John',
  age: 25
})

// 類型化的函數
const increment = (amount: number = 1): void => {
  count.value += amount
}

// 計算屬性自動推斷類型
const doubleCount = computed(() => count.value * 2)
</script>

3.使用 TypeScript 定義 Props

<template>
  <div>{{ title }} - {{ count }}</div>
</template>

<script setup lang="ts">
interface Props {
  title: string
  count?: number
  items: string[]
}

const props = withDefaults(defineProps<Props>(), {
  count: 0
})
</script>

4.類型化的 Emits

<script setup lang="ts">
// 定義 emits 的類型
const emit = defineEmits<{
  (e: 'update', value: number): void
  (e: 'submit', data: { name: string; age: number }): void
}>()

const handleClick = () => {
  emit('update', 10)
  emit('submit', { name: 'John', age: 25 })
}
</script>

配置步驟

1.安裝必要的依賴

npm install -D typescript @vue/tsconfig @vue/runtime-dom
# 或
yarn add -D typescript @vue/tsconfig @vue/runtime-dom

2.創(chuàng)建/更新 tsconfig.json

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "composite": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

3.創(chuàng)建 env.d.ts 文件

/// <reference types="vite/client" />
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}