当前位置: 首页 > news >正文

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;}
}

注意事项

  1. 避免隐式 any:在 tsconfig.json 中启用 strict: true

  2. 类型文件组织:使用 .d.ts 文件管理全局类型

  3. 响应式对象的陷阱

    // 错误:直接解构会丢失响应性
    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 的强类型支持完美契合&#xff0c;极大提升了代码的可维护性和开发体验。本文将深入探讨 Vue3 TypeScript 的关键细节&#xff0c;并通过实际代码示例展示如何高效结合二者。 一、组合式 API 与类型推导 Vue3 的 setup 函数与 T…...

23种设计模式 - 解释器模式

模式定义 解释器模式&#xff08;Interpreter Pattern&#xff09;是一种行为型设计模式&#xff0c;用于为特定语言&#xff08;如数控系统的G代码&#xff09;定义文法规则&#xff0c;并构建解释器来解析和执行该语言的语句。它通过将语法规则分解为多个类&#xff0c;实现…...

常用的 React Hooks 的介绍和示例

目录 1. useState2. useEffect3. useContext4. useReducer5. useCallback6. useMemo7. useRef8. useImperativeHandle9. useLayoutEffect10. useDebugValue 常用的 React Hooks 的介绍和示例&#xff1a; 1. useState useState 是一个用于在函数组件中添加状态的 Hook。 impo…...

ChatGLM-6B模型

ChatGLM-6B 是由 清华大学人工智能研究院&#xff08;THU AI&#xff09; 和 智源研究院&#xff08;BAAI&#xff09; 开发的一款中文对话生成大语言模型。它是ChatGLM系列的一个版本&#xff0c;其核心特点是基于GLM&#xff08;General Language Model&#xff09;架构&…...

编译安装php

前置准备 这里的可能不全&#xff0c;每个人安装的模块不一致&#xff0c;依赖也不不相同&#xff0c;按实际情况调整 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)

欢迎关注个人主页&#xff1a;逸狼 创造不易&#xff0c;可以点点赞吗 如有错误&#xff0c;欢迎指出~ 返回响应 返回静态页面 //RestController Controller RequestMapping("/response") public class ResponseController {RequestMapping("/returnHtmlPage&…...

30 款 Windows 和 Mac 下的复制粘贴软件对比

在日常电脑操作中&#xff0c;复制粘贴是极为高频的操作&#xff0c;一款好用的复制粘贴软件能极大提升工作效率。以下为你详细介绍 30 款 Windows 和 Mac 下的复制粘贴软件&#xff0c;并对比它们的优缺点&#xff0c;同时附上官网下载地址&#xff0c;方便大家获取软件。 Pa…...

【LLAMA】羊驼从LLAMA1到LLAMA3梳理

every blog every motto: Although the world is full of suffering&#xff0c; it is full also of the overcoming of it 0. 前言 LLAMA 1到3梳理 1. LLAMA 1 论文&#xff1a; LLaMA: Open and Efficient Foundation Language Models 时间&#xff1a; 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显卡驱动&#xff1a;nvidia-550&#xff08;1&#xff09;查询显卡ID&#xff08;2&#xff09;PCI ID Repository查询显卡型号&#xff08;3&#xf…...

【蓝桥杯集训·每日一题2025】 AcWing 6123. 哞叫时间 python

6123. 哞叫时间 Week 1 2月18日 农夫约翰正在试图向埃尔茜描述他最喜欢的 USACO 竞赛&#xff0c;但她很难理解为什么他这么喜欢它。 他说「竞赛中我最喜欢的部分是贝茜说 『现在是哞哞时间』并在整个竞赛中一直哞哞叫」。 埃尔茜仍然不理解&#xff0c;所以农夫约翰将竞赛以…...

JAVA中常用类型

一、包装类 1.1 包装类简介 java是面向对象的语言&#xff0c;但是八大基本数据类型不符合面向对象的特征。因此为了弥补这种缺点&#xff0c;为这八中基本数据类型专门设计了八中符合面向面向对象的特征的类型&#xff0c;这八种具有面向对象特征的类型&#xff0c;就叫做包…...

【办公类-90-02】】20250215大班周计划四类活动的写法(分散运动、户外游戏、个别化综合)(基础列表采用读取WORD表格单元格数据,非采用切片组合)

背景需求&#xff1a; 做了中班的四类活动安排表&#xff0c;我顺便给大班做一套 【办公类-90-01】】20250213中班周计划四类活动的写法&#xff08;分散运动、户外游戏、个别化&#xff08;美工室图书吧探索室&#xff09;&#xff09;-CSDN博客文章浏览阅读874次&#xff0…...

求矩阵对角线元素的最大值

求主对角线元素的最大值时&#xff0c;让指针指向A[N-1][N-1]&#xff0c;指针以(N1)为单位递增&#xff0c;就可以指向对角线每个元素&#xff1b; 求次对角线元素的最大值时&#xff0c;让指针指向A[0][N-1]&#xff0c;指针以(N-1)为单位递增&#xff0c;就可以指向副对角线…...

NoSQL之redis数据库

案例知识 关系与分关系型数据库 关系型数据库&#xff1a;Oracle&#xff0c;MySQL&#xff0c;SQL Server 非关系型数据库&#xff1a;Redis&#xff0c;MongDB Redis文件路径 配置文件&#xff1a;/etc/redis/6379.conf 日志文件&#xff1a;/var/log/redis_6379.log 数据文…...

【R语言】非参数检验

一、Mann-Whitney检验 在R语言中&#xff0c;Mann-Whitney U检验&#xff08;也称为Wilcoxon秩和检验&#xff09;用于比较两个独立样本的中位数是否存在显著差异。它是一种非参数检验&#xff0c;适用于数据不满足正态分布假设的情况。 1、独立样本 # 创建两个独立样本数据…...

【力扣Hot 100】栈

1. 有效的括号 给定一个只包括 (&#xff0c;)&#xff0c;{&#xff0c;}&#xff0c;[&#xff0c;] 的字符串 s &#xff0c;判断字符串是否有效。 有效字符串需满足&#xff1a; 左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。每个右括号都有一个对应…...

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&#xff08;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

这次我们继续解读代码&#xff0c;我们主要来看下面两个部分&#xff1b; 至于人脸识别成功的要点我们在最后总结~ 具体代码学习&#xff1a; #定义人脸名称 def name():#预学习照片存放位置path M:/python/workspace/PythonProject/face/imagePaths[os.path.join(path,f) f…...

在使用export default 导出时,使用的components属性的作用?

文章目录 析与思考回答 析与思考 在 Vue.js 中&#xff0c;使用 export default 导出组件时&#xff0c;通常会通过 components 选项将子组件也导出出来&#xff08;其实是将子组件进行局部注册&#xff09; 。这涉及到 Vue.js 组件的注册机制。为了更清晰地理解这个问题&…...

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介 对于社交类软件的功能&#xff0c;我们需要对它的功能特点进行分析&#xff1a; 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具&#xff1a; mysql&#xff1a;关系型数据库&am…...

23-Oracle 23 ai 区块链表(Blockchain Table)

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

招商蛇口 | 执笔CID,启幕低密生活新境

作为中国城市生长的力量&#xff0c;招商蛇口以“美好生活承载者”为使命&#xff0c;深耕全球111座城市&#xff0c;以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子&#xff0c;招商蛇口始终与城市发展同频共振&#xff0c;以建筑诠释对土地与生活的…...