Vue3 与 TypeScript 实战:核心细节与最佳实践
引言
Vue3 的 Composition API 与 TypeScript 的强类型支持完美契合,极大提升了代码的可维护性和开发体验。本文将深入探讨 Vue3 + TypeScript 的关键细节,并通过实际代码示例展示如何高效结合二者。
一、组合式 API 与类型推导
Vue3 的 setup 函数与 TypeScript 的类型推导结合,让组件逻辑更清晰。
示例:带类型推导的组件
<script setup lang="ts">
import { ref } from 'vue';// 自动推导类型:count.value 为 number
const count = ref(0);// 明确类型声明
const message = ref<string>('Hello');// 带类型的函数
const increment = (step: number): void => {count.value += step;
};
</script>
关键点:
-
ref自动推导基础类型(如number) -
泛型
ref<string>显式声明复杂类型 -
函数参数和返回值类型增强可读性
二、Props 的类型安全
通过 TypeScript 的接口(interface)定义 Props,实现编译时类型检查。
示例:类型安全的 Props
<script setup lang="ts">
interface Props {title: string;count?: number; // 可选属性items: Array<{ id: number; name: string }>;
}const props = defineProps<Props>();
</script>
关键点:
-
使用
interface或type定义 Props 结构 -
defineProps<Props>()直接绑定类型 -
可选属性通过
?标记
三、响应式状态与复杂类型
Vue3 的 reactive 和 ref 与 TypeScript 的类型系统深度协作。
示例:复杂对象类型
interface User {id: number;name: string;roles: string[];
}// 明确响应式对象的类型
const user = reactive<User>({id: 1,name: 'Alice',roles: ['admin'],
});// 使用 ref 包裹对象
const config = ref<{ apiUrl: string; timeout: number }>({apiUrl: 'https://api.example.com',timeout: 5000,
});
关键点:
-
reactive直接接收泛型类型 -
ref泛型声明复杂对象类型 -
嵌套对象属性自动类型推断
四、自定义 Hooks 的类型约束
使用 TypeScript 封装可复用的 Composition 函数。
示例:带类型的自定义 Hook
// useCounter.ts
import { ref, type Ref } from 'vue';export default function useCounter(initialValue: number = 0) {const count: Ref<number> = ref(initialValue);const increment = (step: number = 1): void => {count.value += step;};return {count,increment,};
}
使用 Hook:
<script setup lang="ts">
import useCounter from './useCounter';const { count, increment } = useCounter(10);
</script>
优势:
-
输入参数类型 (
initialValue: number) -
返回值类型自动推导
-
明确的泛型类型(如
Ref<number>)
五、模板中的类型安全
Vue3 模板中的事件和插槽也能享受 TypeScript 支持。
示例:带类型的事件处理器
<script setup lang="ts">
const emit = defineEmits<{(e: 'update', payload: { id: number; value: string }): void;(e: 'delete', id: number): void;
}>();const handleClick = () => {emit('update', { id: 1, value: 'new' }); // ✅ 正确emit('delete', '123'); // ❌ 错误:参数类型不匹配
};
</script>
六、第三方库的类型扩展
为 Vue 插件或全局属性添加类型声明。
示例:扩展全局属性
// global.d.ts
import axios from 'axios';declare module 'vue' {interface ComponentCustomProperties {$http: typeof axios;$translate: (key: string) => string;}
}
注意事项
-
避免隐式
any:在tsconfig.json中启用strict: true -
类型文件组织:使用
.d.ts文件管理全局类型 -
响应式对象的陷阱:
// 错误:直接解构会丢失响应性 const { x, y } = reactive({ x: 1, y: 2 }); // 正确:使用 toRefs const { x, y } = toRefs(reactive({ x: 1, y: 2 }));
总结
Vue3 与 TypeScript 的结合为前端开发带来:
-
类型安全:减少运行时错误
-
代码自解释:类型即文档
-
开发效率:IDE 智能提示
-
可维护性:清晰的组件契约
相关文章:
Vue3 与 TypeScript 实战:核心细节与最佳实践
引言 Vue3 的 Composition API 与 TypeScript 的强类型支持完美契合,极大提升了代码的可维护性和开发体验。本文将深入探讨 Vue3 TypeScript 的关键细节,并通过实际代码示例展示如何高效结合二者。 一、组合式 API 与类型推导 Vue3 的 setup 函数与 T…...
23种设计模式 - 解释器模式
模式定义 解释器模式(Interpreter Pattern)是一种行为型设计模式,用于为特定语言(如数控系统的G代码)定义文法规则,并构建解释器来解析和执行该语言的语句。它通过将语法规则分解为多个类,实现…...
常用的 React Hooks 的介绍和示例
目录 1. useState2. useEffect3. useContext4. useReducer5. useCallback6. useMemo7. useRef8. useImperativeHandle9. useLayoutEffect10. useDebugValue 常用的 React Hooks 的介绍和示例: 1. useState useState 是一个用于在函数组件中添加状态的 Hook。 impo…...
ChatGLM-6B模型
ChatGLM-6B 是由 清华大学人工智能研究院(THU AI) 和 智源研究院(BAAI) 开发的一款中文对话生成大语言模型。它是ChatGLM系列的一个版本,其核心特点是基于GLM(General Language Model)架构&…...
编译安装php
前置准备 这里的可能不全,每个人安装的模块不一致,依赖也不不相同,按实际情况调整 yum install libxml2 -y yum install libxml2-devel -y yum install openssl-devel -y yum install sqlite-devel -y yum install libcurl-devel -yyum ins…...
【JavaEE进阶】Spring MVC(3)
欢迎关注个人主页:逸狼 创造不易,可以点点赞吗 如有错误,欢迎指出~ 返回响应 返回静态页面 //RestController Controller RequestMapping("/response") public class ResponseController {RequestMapping("/returnHtmlPage&…...
30 款 Windows 和 Mac 下的复制粘贴软件对比
在日常电脑操作中,复制粘贴是极为高频的操作,一款好用的复制粘贴软件能极大提升工作效率。以下为你详细介绍 30 款 Windows 和 Mac 下的复制粘贴软件,并对比它们的优缺点,同时附上官网下载地址,方便大家获取软件。 Pa…...
【LLAMA】羊驼从LLAMA1到LLAMA3梳理
every blog every motto: Although the world is full of suffering, it is full also of the overcoming of it 0. 前言 LLAMA 1到3梳理 1. LLAMA 1 论文: LLaMA: Open and Efficient Foundation Language Models 时间: 2023.02 1.1 前言…...
【OS安装与使用】part3-ubuntu安装Nvidia显卡驱动+CUDA 12.4
文章目录 一、待解决问题1.1 问题描述1.2 解决方法 二、方法详述2.1 必要说明2.2 应用步骤2.2.1 更改镜像源2.2.2 安装NVIDIA显卡驱动:nvidia-550(1)查询显卡ID(2)PCI ID Repository查询显卡型号(3…...
【蓝桥杯集训·每日一题2025】 AcWing 6123. 哞叫时间 python
6123. 哞叫时间 Week 1 2月18日 农夫约翰正在试图向埃尔茜描述他最喜欢的 USACO 竞赛,但她很难理解为什么他这么喜欢它。 他说「竞赛中我最喜欢的部分是贝茜说 『现在是哞哞时间』并在整个竞赛中一直哞哞叫」。 埃尔茜仍然不理解,所以农夫约翰将竞赛以…...
JAVA中常用类型
一、包装类 1.1 包装类简介 java是面向对象的语言,但是八大基本数据类型不符合面向对象的特征。因此为了弥补这种缺点,为这八中基本数据类型专门设计了八中符合面向面向对象的特征的类型,这八种具有面向对象特征的类型,就叫做包…...
【办公类-90-02】】20250215大班周计划四类活动的写法(分散运动、户外游戏、个别化综合)(基础列表采用读取WORD表格单元格数据,非采用切片组合)
背景需求: 做了中班的四类活动安排表,我顺便给大班做一套 【办公类-90-01】】20250213中班周计划四类活动的写法(分散运动、户外游戏、个别化(美工室图书吧探索室))-CSDN博客文章浏览阅读874次࿰…...
求矩阵对角线元素的最大值
求主对角线元素的最大值时,让指针指向A[N-1][N-1],指针以(N1)为单位递增,就可以指向对角线每个元素; 求次对角线元素的最大值时,让指针指向A[0][N-1],指针以(N-1)为单位递增,就可以指向副对角线…...
NoSQL之redis数据库
案例知识 关系与分关系型数据库 关系型数据库:Oracle,MySQL,SQL Server 非关系型数据库:Redis,MongDB Redis文件路径 配置文件:/etc/redis/6379.conf 日志文件:/var/log/redis_6379.log 数据文…...
【R语言】非参数检验
一、Mann-Whitney检验 在R语言中,Mann-Whitney U检验(也称为Wilcoxon秩和检验)用于比较两个独立样本的中位数是否存在显著差异。它是一种非参数检验,适用于数据不满足正态分布假设的情况。 1、独立样本 # 创建两个独立样本数据…...
【力扣Hot 100】栈
1. 有效的括号 给定一个只包括 (,),{,},[,] 的字符串 s ,判断字符串是否有效。 有效字符串需满足: 左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。每个右括号都有一个对应…...
HTTP 与 HTTPS:协议详解与对比
文章目录 概要 一. HTTP 协议 1.1 概述 1.2 工作原理 1.3 请求方法 1.4 状态码 二. HTTPS 协议 2.1 概述 2.2 工作原理 2.3 SSL/TLS 协议 2.4 证书 三. HTTP 与 HTTPS 的区别 四. 应用场景 4.1 HTTP 的应用场景 4.2 HTTPS 的应用场景 概要 HTTP(Hy…...
C++编程语言:抽象机制:模板和层级结构(Bjarne Stroustrup)
目录 27.1 引言(Introduction) 27.2 参数化和层级结构(Parameterization and Hierarchy) 27.2.1 生成类型(Generated Types) 27.2.2 模板转换(Template Conversions) 27.3 类模板层级结构(Hierarchies of Class Templates) 27.3.1 模板对比接口(Templates as Interf…...
建筑兔零基础自学python记录22|实战人脸识别项目——视频人脸识别(下)11
这次我们继续解读代码,我们主要来看下面两个部分; 至于人脸识别成功的要点我们在最后总结~ 具体代码学习: #定义人脸名称 def name():#预学习照片存放位置path M:/python/workspace/PythonProject/face/imagePaths[os.path.join(path,f) f…...
在使用export default 导出时,使用的components属性的作用?
文章目录 析与思考回答 析与思考 在 Vue.js 中,使用 export default 导出组件时,通常会通过 components 选项将子组件也导出出来(其实是将子组件进行局部注册) 。这涉及到 Vue.js 组件的注册机制。为了更清晰地理解这个问题&…...
【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密
在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...
跨链模式:多链互操作架构与性能扩展方案
跨链模式:多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈:模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展(H2Cross架构): 适配层…...
今日科技热点速览
🔥 今日科技热点速览 🎮 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售,主打更强图形性能与沉浸式体验,支持多模态交互,受到全球玩家热捧 。 🤖 人工智能持续突破 DeepSeek-R1&…...
html-<abbr> 缩写或首字母缩略词
定义与作用 <abbr> 标签用于表示缩写或首字母缩略词,它可以帮助用户更好地理解缩写的含义,尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时,会显示一个提示框。 示例&#x…...
Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?
Redis 的发布订阅(Pub/Sub)模式与专业的 MQ(Message Queue)如 Kafka、RabbitMQ 进行比较,核心的权衡点在于:简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...
基于SpringBoot在线拍卖系统的设计和实现
摘 要 随着社会的发展,社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统,主要的模块包括管理员;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...
【笔记】WSL 中 Rust 安装与测试完整记录
#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统:Ubuntu 24.04 LTS (WSL2)架构:x86_64 (GNU/Linux)Rust 版本:rustc 1.87.0 (2025-05-09)Cargo 版本:cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...
在Mathematica中实现Newton-Raphson迭代的收敛时间算法(一般三次多项式)
考察一般的三次多项式,以r为参数: p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]; 此多项式的根为: 尽管看起来这个多项式是特殊的,其实一般的三次多项式都是可以通过线性变换化为这个形式…...
MySQL JOIN 表过多的优化思路
当 MySQL 查询涉及大量表 JOIN 时,性能会显著下降。以下是优化思路和简易实现方法: 一、核心优化思路 减少 JOIN 数量 数据冗余:添加必要的冗余字段(如订单表直接存储用户名)合并表:将频繁关联的小表合并成…...
前端中slice和splic的区别
1. slice slice 用于从数组中提取一部分元素,返回一个新的数组。 特点: 不修改原数组:slice 不会改变原数组,而是返回一个新的数组。提取数组的部分:slice 会根据指定的开始索引和结束索引提取数组的一部分。不包含…...
