TypeScript 开发支持

🎯 引言

学会这篇文章后，你将能够熟练地在 Vue 3 项目中使用 TypeScript，提升代码的类型安全性和开发效率。无论是组件中 Props 和事件的类型推断，还是可复用的 composable 函数的 TS 支持，甚至是调试时的类型提示优化，都能轻松应对，帮你写出更健壮、更易维护的前端代码。

⚙️ Vue 3 的 TS 支持提升

Vue 3 在设计之初就高度重视对 TypeScript 的支持，核心代码采用 TypeScript 编写，使得官方的类型定义非常完善。这带来了许多提升：

• 组件的 Props、Emit 类型可以被准确推断，避免手动繁琐的类型声明。
• 组合式 API（Composition API）本身就是按照 TS 友好设计，方便在 setup 函数中使用。
• 官方提供的 Vue CLI 和 Vite 模板均支持 TypeScript，方便快速搭建 TS 项目。
• 更丰富的类型推断和提示，提升开发体验。

🧩 在组件中使用 TS（Props/Emit 的类型推断）

Vue 3 组件中使用 TypeScript 最重要的部分是 Props 和 Emit 的类型声明。通过 defineProps 和 defineEmits 这两个编译时辅助函数，可以自动推断类型，写法简单且安全。

<template>
    <button @click="handleClick">{{ label }}</button>
</template>

<script setup lang="ts">
const props = defineProps<{
    label: string;
    count?: number;
}>();

const emit = defineEmits<{
    (e: 'click', id: number): void;
}>();

function handleClick() {
    emit('click', 42);
}
</script>

这段代码中：

• defineProps 接收一个类型对象，自动推断 props 类型，label 是必需字符串，count 是可选数字。
• defineEmits 声明了一个事件 click，该事件携带一个数字参数。
• 在模板和逻辑中都能获得完整的类型提示。

这相较于 Vue 2 用 PropType 和 $emit 的写法，更简洁且类型更精准。

🧑‍🔧 在 composable 函数中使用 TS

composable 函数是 Vue 3 组合式 API 的核心，封装业务逻辑后复用。利用 TypeScript 可以对输入参数和返回值做类型约束，使得调用更加安全。

示例：一个计数器 composable

import { ref } from 'vue';

export function useCounter(initialValue = 0) {
    const count = ref<number>(initialValue);

    function increment(amount: number = 1) {
        count.value += amount;
    }

    return { count, increment };
}

使用时：

import { useCounter } from './useCounter';

const { count, increment } = useCounter(10);
increment(5);
// count.value 类型是 number，编辑器可自动提示

上面例子中：

• 使用泛型给 ref 明确类型。
• 函数参数和返回值都有类型定义。
• 调用时享受类型检查和自动提示。

🧾 小节总结

• Vue 3 从设计上增强了 TypeScript 支持，使用 Composition API 时类型推断效果极佳。
• 通过 defineProps 和 defineEmits 可以方便安全地声明组件的 Props 和事件类型。
• 在 composable 函数中使用 TypeScript，可以保证参数和返回值的类型安全，提升复用性。
• 利用 VSCode 插件和一些 TS 技巧，能大幅提升开发时的类型提示和调试效率。

❓ 知识问答（Q&A）

Q：Vue 3 中如何给组件的事件声明类型？

A：使用 defineEmits，传入带事件名和参数的类型定义，例如 (e: 'click', id: number) => void。

Q：为什么推荐使用 <script setup lang="ts"> 而非普通 <script>？

A：<script setup> 是编译时语法糖，能自动推断类型、简化代码，配合 TS 带来更好的开发体验。

Q：composable 函数中如何声明返回值的类型？

A：给函数返回的对象或变量写上类型注解，比如 const count = ref<number>(0)，函数本身也可以声明返回类型。

🧪 小练习

练习 1

编写一个带有类型定义的计数器组件，支持传入初始值和增加步长，并触发 update 事件传递最新值。

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

<script setup lang="ts">
// 在这里编写代码
</script>

练习 2

实现一个 composable 函数 useToggle，接收初始布尔值，返回当前状态和切换函数。

// 在这里编写代码

🎉 恭喜你已经掌握 Vue3 中 TypeScript 的组件类型推断、composable 函数使用，以及类型提示和调试优化技巧啦！继续实践，写出更高质量的前端代码！