在 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