核心内容摘要
二月KTV新曲风暴：点燃你的新年歌单！
Vue3 对 TS 的适配是全方位的从组件定义、Props 声明到响应式数据、生命周期等都有专门的 TS 语法下面我会按开发中最常用的场景逐一讲解
基础组件的 TS 写法setup 语法糖Vue3 推荐使用script setup langts作为 TS 组件的核心写法这是对 TS 支持最友好的方式也是官方推荐的最佳实践。
template div/div button clickhandleClick点击/button /template script setup langts //
响应式数据的 TS 类型标注 import { ref, reactive } from vue // ref 基础类型TS 可自动推导也可显式标注 const msg refstring(Hello Vue3 TS) // 显式标注为字符串类型 const count ref(
// 自动推导为 number 类型 // reactive 复杂类型推荐用 interface/type 定义 interface User { name: string age: number isAdmin?: boolean // 可选属性 } const user reactiveUser({ name: 张三, age: 20 }) //
函数的 TS 类型标注 const handleClick (): void { // 无返回值标注为 void count.value console.log(count.value) } /script
核心Props 的 TS 强类型声明Vue3 提供了defineProps专门适配 TS 的写法有两种方式推荐第二种方式 1运行时声明兼容 Vue2 风格类型推导script setup langts // TS 会自动从 props 定义中推导类型 const props defineProps({ title: { type: String, required: true }, size: { type: Number, default: 16 }, isShow: Boolean }) // 使用 props 时会有完整的类型提示 console.log(props.title) // 提示为 string 类型 /script方式 2纯 TS 类型声明推荐更贴合 TS 习惯script setup langts // 用 TS 接口定义 Props 类型配合 withDefaults 设置默认值 interface Props { title: string // 必传 size?: number // 可选 isShow?: boolean // 可选 } // 方式 1仅声明类型 // const props definePropsProps() // 方式 2声明类型 设置默认值推荐 const props withDefaults(definePropsProps(), { size: 16, isShow: true }) /script
Emits 的 TS 类型声明defineEmits同样支持 TS 类型标注明确事件的名称和参数类型script setup langts // 方式 1纯 TS 类型声明推荐 const emit defineEmits{ // 事件名: (参数1类型, 参数2类型) void change: (value: string) void confirm: (id: number, name: string) void }() // 方式 2运行时声明类型推导 // const emit defineEmits([change, confirm]) // 触发事件时会校验参数类型 const handleConfirm () { emit(confirm, 1, 张
// 正确 // emit(confirm, 1, 张
// TS 报错id 应为 number 类型 } /script
Ref 获取 DOM 元素的 TS 标注获取 DOM 元素时需要给 ref 标注具体的元素类型template input refinputRef typetext / /template script setup langts import { ref, onMounted } from vue // 标注为 HTMLInputElement 类型初始值为 null const inputRef refHTMLInputElement | null(null) onMounted(() { // 使用时需要判空避免 null 报错 if (inputRef.value) { inputRef.value.focus() // TS 会提示 input 元素的所有方法/属性 } }) /script
组合式函数的 TS 适配自定义组合式函数时通过 TS 标注返回值类型让调用方获得完整提示// hooks/useUser.ts import { ref, computed } from vue interface UserInfo { id: number name: string } // 标注函数返回值类型 export function useUser(): { user: RefUserInfo | null userName: ComputedRefstring updateName: (name: string) void } { const user refUserInfo | null(null) const userName computed(() { return user.value?.name || 未知用户 }) const updateName (name: string): void { if (user.value) { user.value.name name } } return { user, userName, updateName } }在组件中使用script setup langts import { useUser } from /hooks/useUser // 解构时会获得完整的类型提示 const { user, userName, updateName } useUser() /script
全局属性 / 方法的 TS 扩展如果给 Vue 实例添加了全局属性如app.config.globalProperties.$api需要扩展 TS 类型以获得提示// src/types/global.d.ts import type { ComponentCustomProperties } from vue import type { Api } from /api // 扩展 ComponentCustomProperties 接口 declare module vue { interface ComponentCustomProperties { $api: Api // 声明全局 $api 的类型 $formatTime: (time: number) string // 声明全局方法类型 } }
总结Vue3 对 TS 的核心适配语法可以
总结为以下 3 个关键点核心基座使用script setup langts作为 TS 组件的基础这是所有适配语法的前提。
核心 APIdefinePropsProps()、withDefaults()、defineEmitsEmits()是组件层面适配 TS 的核心能精准约束 Props/Emits 类型。
类型标注响应式数据ref/reactive、DOM 引用、组合式函数等场景通过 TS 的interface/type 显式标注实现完整的类型校验和代码提示。
这些语法的核心目标是让 Vue 组件的每一个部分数据、Props、事件、方法都能被 TS 精准识别既提升开发效率也减少运行时错误。
vue3中父子同行你想了解的是 Vue3 中父子组件在同一行显示的布局实现方法这本质上是 CSS 布局的问题Vue3 本身不直接控制布局但可以结合 Vue 的组件写法来实现这个效果。
下面我会提供几种最常用、兼容性最好的实现方案你可以根据实际需求选择
核心实现思路Flex 布局推荐Flex 布局是实现 “父子同行” 最简洁、灵活的方式也是现代前端布局的首选方案。
基础示例父组件控制布局!-- 父组件 Parent.vue -- template !-- 父容器设置 display: flex 即可让子元素同行 -- div classparent-container !-- 子组件1 -- Child1 / !-- 子组件2 -- Child2 / !-- 普通元素也适用 -- div classnormal-element普通元素/div /div /template script setup langts import父子通信你想了解的是 Vue3 中父子组件之间的通信方式这是 Vue 开发中最基础也最核心的知识点之一Vue3 结合 TypeScript 提供了更规范、类型更安全的通信方案。
下面我会按「父传子」「子传父」「父子双向通信」「跨级 / 通用通信补充」四个维度结合 TS 语法详细讲解所有示例都基于 Vue3 推荐的script setup langts语法。