首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue使用TypeScript

在Vue中使用TypeScript的几种方式

2026-05-26 10:04:58 作者：穆金秋

本文主要介绍了在Vue中使用TypeScript的几种方式,包括通过<script lang="ts">结合defineComponent,使用Composition API + <script setup lang="ts">和TypeScript定义Props和Emits类型,下面就来详细的介绍一下

Vue中使用TypeScript的几种方式：

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

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

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

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

在 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.创建/更新 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 的好处

类型安全：在编译时捕获类型错误
更好的 IDE 支持：自动补全、类型提示、重构
清晰的接口定义：明确的 Props 和 Emits 类型
代码可维护性：类型作为文档，提高代码可读性

常见工具支持

VSCode：配合 Volar 插件
WebStorm：内置支持
Vite：开箱即用
Vue CLI：通过 vue add typescript

到此这篇关于在Vue中使用TypeScript的几种方式的文章就介绍到这了,更多相关Vue使用TypeScript内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！