在 Vue 中使用 TypeScript 的几种方式

Vue中使用TypeScript的几种方式：

1. 通过<script lang="ts">结合defineComponent；
2. 推荐使用Composition API + <script setup lang="ts">实现类型推断；
3. 使用TypeScript定义Props和Emits类型。

---

配置步骤包括安装依赖、设置tsconfig.json和env.d.ts文件。

---

使用TypeScript能提供类型安全、更好的IDE支持、清晰的接口定义和更高的代码可维护性。

---

主流开发工具如VSCode、WebStorm、Vite和Vue CLI都提供良好支持。

---

在 Vue 中使用 TypeScript 的几种方式

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

vue

<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">（推荐）

vue

<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

vue

<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

vue

<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. 安装必要的依赖

bash

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

2. 创建/更新 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. 创建 env.d.ts 文件

/// <reference types="vite/client" />

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

---

使用 TypeScript 的好处

1. 类型安全：在编译时捕获类型错误

2. 更好的 IDE 支持：自动补全、类型提示、重构

3. 清晰的接口定义：明确的 Props 和 Emits 类型

4. 代码可维护性：类型作为文档，提高代码可读性

---

常见工具支持

• VSCode：配合 Volar 插件

• WebStorm：内置支持

• Vite：开箱即用

• Vue CLI ：通过 vue add typescript