✍️【TS类型体操进阶】挑战类型极限,成为类型魔法师!♂️✨
哈喽类型战士们!今天我们要玩转TS类型体操,让你的类型系统像体操运动员一样灵活优雅~ 学会这些绝招,保准你的代码类型稳如老狗!(文末附类型体操段位表)🚀
一、什么是类型体操?
🧩 通俗理解:用类型写"代码"
就像用积木搭建复杂建筑,用基础类型组合出神奇的类型结构!
⚙️ 核心装备:
✅ 条件类型(类型界的if/else)
✅ 映射类型(类型复印机)
✅ 模板字面量(字符串类型魔法)
✅ 递归类型(类型永动机)
二、六大高阶技巧揭秘
1️⃣ 字符串模板类型 —— 类型界的PS
type HttpMethod = 'GET' | 'POST'
type ApiPath = `/api/${string}` const path: ApiPath = '/api/user' // ✅
const errorPath: ApiPath = '/user' // ❌
实战场景:
- 路由路径校验
- CSS类名规范
2️⃣ 递归类型 —— 类型"套娃"
// 实现树形结构类型
type TreeNode<T> = { value: T children?: TreeNode<T>[]
} const tree: TreeNode<string> = { value: 'root', children: [{ value: 'leaf' }]
}
应用场景:
- 无限级菜单
- 组织架构树
3️⃣ 类型推断(infer)进阶 —— 类型侦探
// 提取函数返回值类型
type GetReturnType<T> = T extends (...args: any) => infer R ? R : never type A = GetReturnType<() => string> // string
type B = GetReturnType<number> // never
破案技巧:
- 提取数组元素类型
- 解构Promise返回值
4️⃣ 分布式条件类型 —— 类型分身术
type ToArray<T> = T extends any ? T[] : never type StrArr = ToArray<string | number> // string[] | number[]
原理揭秘:
当T是联合类型时,条件类型会分布式执行
5️⃣ 类型映射2.0 —— 深度改造
// 递归将所有属性变为只读
type DeepReadonly<T> = { readonly [P in keyof T]: T[P] extends object ? DeepReadonly<T[P]> : T[P]
} type User = { name: string info: { age: number }
} type ReadonlyUser = DeepReadonly<User>
/*
{ readonly name: string readonly info: { readonly age: number }
}
*/
6️⃣ 类型编程实战 —— 实现内置工具
// 手写Partial
type MyPartial<T> = { [P in keyof T]?: T[P]
} // 手写Exclude
type MyExclude<T, U> = T extends U ? never : T
进阶挑战:
- 实现Omit
- 实现NonNullable
三、Vue3中的类型体操实战
1️⃣ 组件Props类型推导
// 自动提取Props类型
const props = defineProps<{ id: number name: string
}>() type PropsType = typeof props // { id: number; name: string }
2️⃣ 组合式函数类型增强
// 带自动类型推断的useState
function useState<T>(initial: T) { const state = ref(initial) const setState = (value: T) => state.value = value return [state, setState] as const
} const [count, setCount] = useState(0) // 自动推断number类型
四、类型体操段位表
段位 | 掌握技能 | 示例场景 |
---|---|---|
青铜 | 基础泛型、接口 | 函数参数类型约束 |
白银 | 条件类型、映射类型 | 表单校验类型 |
黄金 | 模板字面量、类型推断 | API路径校验 |
钻石 | 递归类型、分布式条件 | 树形结构类型 |
王者 | 类型编程、模拟内置工具 | 实现复杂工具类型 |
五、常见问题QA
❓ Q:类型体操有什么用?
A:提升代码健壮性、实现智能提示、规范团队协作
❓ Q:类型写太复杂会不会影响性能?
A:类型只在编译时存在,不影响运行时性能
❓ Q:如何调试复杂类型?
A:使用type Debug<T> = { [K in keyof T]: T[K] }
展开类型
六、学习资源推荐
📚 TypeScript官方文档
🎮 Type Challenges 类型题库
🔧 TypeScript Playground 在线实验室
掌握类型体操,你就是团队里的"类型魔法师"!🧙♂️ 从今天开始,让你的代码既有钢铁般的类型检查,又有艺术家般的优雅~ 下期预告「TS声明文件全解析」,带你征服第三方库类型!🚀
相关文章:
✍️【TS类型体操进阶】挑战类型极限,成为类型魔法师!♂️✨
哈喽类型战士们!今天我们要玩转TS类型体操,让你的类型系统像体操运动员一样灵活优雅~ 学会这些绝招,保准你的代码类型稳如老狗!(文末附类型体操段位表)🚀 一、什么是类型体操? &…...
部署Prometheus+Grafana简介、监控及设置告警(一)
部署PrometheusGrafana简介、监控及设置告警 一. 环境准备 服务器类型IP地址组件 Prometheus服务器、agent服务器、Grafana服务器192.168.213.7Prometheus 、node_expprter,Grafanaagent服务器192.168.213.8node_exporter 如果有防火请记得开启9090&am…...
k8s部署OpenELB
k8s部署OpenELB k8s部署OpenELB配置示例: layer2模式 k8s部署OpenELB 部署OpenELB至K8s集群 # k8s部署OpenELB kubectl apply -f https://raw.githubusercontent.com/openelb/openelb/refs/heads/master/deploy/openelb.yaml# 查看openelb的pod状态 kubectl get pods -n open…...
python打卡day18
聚类后的分析:推断簇的类型 知识点回顾: 推断簇含义的2个思路:先选特征和后选特征通过可视化图形借助ai定义簇的含义科研逻辑闭环:通过精度判断特征工程价值 作业:参考示例代码对心脏病数据集采取类似操作,并且评估特征…...
新品发布 | 96MHz主频 M0+内核低功耗单片机CW32L011产品介绍
CW32L011是基于 eflash 的单芯片低功耗微控制器,集成了主频高达 96MHz的 ARMCortex-M0内核、高速嵌入式存储器(多至 64K字节 FLASH 和多至 6K 字节 SRAM)以及一系列全面的增强型外设和 I/O 口。 所有型号都提供全套的通信接口(3路 UART、1路 SPI和1路12C)、12位高速…...
【面试 · 二】JS个别重点整理
目录 数组方法 字符串方法 遍历 es6 构造函数及原型 原型链 this指向 修改 vue事件循环Event Loop FormData 数组方法 改变原数组:push、pop、shift、unshift、sort、splice、reverse不改变原属组:concat、join、map、forEach、filter、slice …...
【详细教程】ROC曲线的计算方式与绘制方法详细介绍
《------往期经典推荐------》 一、AI应用软件开发实战专栏【链接】 项目名称项目名称1.【人脸识别与管理系统开发】2.【车牌识别与自动收费管理系统开发】3.【手势识别系统开发】4.【人脸面部活体检测系统开发】5.【图片风格快速迁移软件开发】6.【人脸表表情识别系统】7.【…...
【神经网络与深度学习】VAE 在解码前进行重参数化
在 VAE 中,解码之前进行重参数化主要有以下几个重要原因: 可微分性 在深度学习里,模型是通过反向传播算法来学习的,而这需要计算梯度。若直接从潜在变量的分布 (q_{\theta}(z|x))(由编码器输出的均值 (\mu) 和方差 (…...
ai agent(智能体)开发 python3基础11: java 调用python waitfor卡死,导致深入理解操作系统进程模型和IPC机制
java 调用python waitfor 卡死 导致浏览器无法自动关闭,java ,python双发无限等待 根源在于还是没有理解 进程之间标准输入输出到底是什么含义 系统进程与跨语言调用的核心机制 在跨语言调用(如Java调用Python)时,理…...
大模型赋能:2D 写实数字人开启实时交互新时代
在数字化浪潮席卷全球的当下,人工智能技术不断突破创新,其中大模型驱动的 2D 写实数字人正成为实时交互领域的一颗新星,引领着行业变革,为人们带来前所未有的交互体验。 一、2D 写实数字人概述 2D 写实数字人是通过计算机图形学…...
CATIA高效工作指南——零件建模篇(二)
一、PowerCopy特征复用技术 1.1 智能特征封装 通过几何图形集(Geometrical Set)构建参数化特征组,将关联的草图、曲面、实体等元素进行逻辑封装。操作流程如下: 创建新几何图形集并完成特征建模激活PowerCopy命令,选择目标几何集定…...
QT人工智能篇-opencv
第一章 认识opencv 1. 简单概述 OpenCV是一个跨平台的开源的计算机视觉库,主要用于实时图像处理和计算机视觉应用。它提供了丰富的函数和算法,用于图像和视频的采集、处理、分析和显示。OpenCV支持多种编程语言,包括C、Python、Java等&…...
java实现一个操作日志模块功能,怎么设计
为了设计一个高效、可靠且可扩展的操作日志模块,可以结合 AOP(面向切面编程)、异步处理(多线程或MQ)以及合理的存储策略,具体方案如下: 1. 技术选型与架构设计 (1) AOP 实现非侵…...
音频相关基础知识
主要参考: 音频基本概念_音频和音调的关系-CSDN博客 音频相关基础知识(采样率、位深度、通道数、PCM、AAC)_音频2通道和8ch的区别-CSDN博客 概述 声音的本质 声音的本质是波在介质中的传播现象,声波的本质是一种波,是一…...
【Agent】使用 Python 结合 OpenAI 的 API 实现一个支持 Function Call 的程序,修改本机的 txt 文件
使用 Python 结合 OpenAI 的 API 来实现一个支持 Function Call 的程序,修改本机的 txt 文件。需要注意,在运行代码前,要确保已经安装了 openai 库,并且拥有有效的 OpenAI API Key。 import openai import os# 设置你的 OpenAI A…...
mint系统详解详细解释
Linux Mint是一款基于Ubuntu的开源桌面操作系统,以用户友好、稳定性强、功能全面著称,尤其适合从Windows迁移的新手和追求高效办公的用户。以下从技术架构、版本演进、生态体系、核心功能、应用场景等维度进行深度解析: 一、技术架构&#x…...
WordPress个人博客搭建(三):WordPress网站优化
前言 在之前的WordPress个人博客搭建(一)与WordPress个人博客搭建(二)文章中,我们已经在自己的非凡云云服务器上成功搭建了WordPress个人博客。现在让我们继续这场数字世界的耕耘,通过插件与主题的巧妙搭配…...
力扣1812题解
记录 2025.5.7 题目: 思路: 从左下角开始,棋盘的行数和列数(均从 1 开始计数)之和如果为奇数,则为白色格子,如果和为偶数,则为黑色格子。 代码: class Solution {pu…...
深入理解XGBoost(何龙 著)学习笔记(三)
原创 化心为海 微阅读札记https://mp.weixin.qq.com/s/vBE3fu9AZDjRFd5niJU0lg 2025年05月06日 18:17 北京 第三章 机器学习算法基础 摘要:本章首先介绍了基础的机器学习算法的实现原理和应用;然后对决策树模型做了详细介绍;最后࿰…...
一篇文章解析 H.264/AVC 视频编解码标准框架
古人有云: “不积跬步, 无以至千里; 不积小流, 无以成江海。” 本文给小伙伴们删繁就简介绍 H.264/AVC 视频编解码标准框架。 H.264/AVC框架 H.264/AVC 作为视频编码领域的里程碑标准,仍然沿用混合编码框架,但其通过模块化技术创新显著提升了压缩效率和网络适应性。H.264/AV…...
Sat2Density论文详解——卫星-地面图像生成
“Sat2Density: Faithful Density Learning from Satellite-Ground Image Pairs”,即从卫星-地面图像对中学习忠实的密度表示。论文的主要目标是开发一种能够准确表示卫星图像三维几何结构的方法,特别关注从卫星图像中合成具有3D意识的地面视图图像的挑战…...
【计算机架构】RISC(精简指令集计算机)架构
一、引言 在计算机科学技术飞速发展的长河中,计算机架构犹如一艘艘领航的巨轮,不断引领着计算技术朝着更高性能、更低功耗、更智能化的方向前行。RISC(精简指令集计算机)架构便是其中一艘极为独特且极具影响力的“巨轮”。从早期计…...
智算中心基础设施0-1建设全流程及投产后的运维
0 - 1 建设全流程 规划与设计 需求分析:与相关部门和用户沟通,了解智算中心的业务需求,包括计算能力、存储容量、网络带宽、应用场景等,为后续的设计提供依据。选址规划:考虑电力供应、网络接入、环境条件、安全因素等…...
用3D slicer 去掉影像中的干扰体素而还原干净影像(脱敏切脸处理同)
今天遇到一个特殊的影像,扫描被试的头颅被很多干扰阴影快给遮盖住了,3D 建模出来的头颅有很多干扰,非常影响处理和视觉体验,正好解锁一个3D slicer 的功能吧。 背景:有一个被试数据头顶有很多干扰,直接覆盖…...
滚动条样式
title: 滚动条样式 date: 2025-05-07 19:59:31 tags:css 滚动条样式完整定义 HTML 示例 以下是一个包含所有主流浏览器滚动条样式属性的完整HTML文件,涵盖了WebKit内核浏览器和Firefox的滚动条定制: <!DOCTYPE html> <html lang"zh-CN&…...
Prompt(提示词)工程师,“跟AI聊天”
提示词工程师这活儿早就不只是“跟AI聊天”那么简单了,特别是现在MetaGPT、LangChain这些框架出来后,整个赛道都升级成“AI指挥官”的较量了。 第一层:基础能力得打牢 AI语言学家的功底 别笑,真得像学外语一样研究大模型。比如GP…...
Java版ERP管理系统源码(springboot+VUE+Uniapp)
ERP系统是企业资源计划(Enterprise Resource Planning)系统的缩写,它是一种集成的软件解决方案,用于协调和管理企业内各种关键业务流程和功能,如财务、供应链、生产、人力资源等。它的目标是帮助企业实现资源的高效利用…...
金融小知识
📉 一、“做空”是啥? 通俗说法:押“它会跌”,赚钱! ✅ 举个例子: 有一天老王的包子涨价到 10 块一个,张三觉得这价格肯定撑不住,未来会跌到 5 块。于是他: 向朋友借了…...
高组装导轨的特点
高组装导轨通常是四列式单圆弧齿形接触直线导轨,具有整合化的结构设计,适用于重负荷和精密应用。与其它直线导轨高组装导轨提升了负荷与刚性能力,具备四方向等负载特色和自动调心功能,能够吸收安装面的装配误差,达到高…...
PE文件结构(导入表)
导入表 什么是导入表? 导入表就是pe文件需要依赖哪些模块以及依赖这些模块中的哪些函数 回想我们导出表的内容,导出表的位置和大小是保存在扩展pe头最后一个结构体数组当中的 IMAGE_DATA_DIRECTORY DataDirectory[IMAGE_NUMBEROF_DIRECTORY_ENTRIES]第…...
AI 实践探索:辅助生成测试用例
背景 目前我们的测试用例主要依赖人工生成和维护,AI时代的来临,我们也在思考“AI如何赋能业务”,提出了如下命题: “探索通过AI辅助生成测试用例,完成从需求到测试用例生成的穿刺”。 目标 找全测试路径辅助生成测…...
2025年链游行业DDoS与CC攻击防御全解析:高带宽时代的攻防博弈
2025年,链游行业在元宇宙与Web3.0技术的推动下迎来爆发式增长,但随之而来的DDoS与CC攻击也愈发猖獗。攻击者瞄准链游的高频交易接口、NFT拍卖系统及区块链节点,通过混合型攻击(如HTTP FloodUDP反射)瘫痪服务࿰…...
LeetCode热题100--73.矩阵置零--中等
1. 题目 给定一个 m x n 的矩阵,如果一个元素为 0 ,则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 示例 1: 输入:matrix [[1,1,1],[1,0,1],[1,1,1]] 输出:[[1,0,1],[0,0,0],[1,0,1]] 示例 2ÿ…...
51camera将参加第九届沥青路面论坛暨新技术新成果展示会
51camera志强视觉 51camera即将参加第九届沥青路面论坛暨新技术新成果展示会,届时会有相关动态应用展示,欢迎广大客户朋友莅临参观。 会议时间:2025 年5月16日-18日 会议地点:长沙国际会议中心一层多功能厅1-6厅(长…...
python 闭包获取循环数据经典 bug
问题代码 def create_functions():functions []for i in range(3):# 创建一个函数,期望捕获当前循环的i值functions.append(lambda: print(f"My value is: {i}"))return functions# 创建三个函数 f0, f1, f2 create_functions()# 调用这些函数 f0() # 期望输出 &…...
Java的HashMap面试题
目录 1. 说一下HashMap的工作原理?(1.7和1.8都是) 2. 了解的哈希冲突解决方法有哪些 3. JAVA8的 HashMap做了哪些优化 4. HashMap的数组长度必须是 2 的 n 次方 5. HashMap什么时候引发扩容 5.1 数组容量小于64的情况: 5.2…...
spring4.x详解介绍
一、核心特性与架构改进 全面支持Java 8与Java EE 7 Spring 4.x首次实现对Java 8的完整支持,包括: Lambda表达式与Stream API:简化代码编写,提升函数式编程能力; 新的时间日期API(如LocalDate、LocalTime&…...
从图灵机到量子计算:逻辑可视化的终极进化
一、图灵机:离散符号系统的奠基者 1.1 计算理论的数学根基 1936 年,艾伦・图灵在《论可计算数及其在判定问题中的应用》中提出的图灵机模型,本质上是一个由七元组\( M (Q, \Sigma, \Gamma, \delta, q_0, q_{accept}, q_{reject}) \)构成的…...
Python初学者笔记第九期 -- (列表相关操作及列表编程练习题)
第17节课 列表相关操作 无论是内置函数、对象函数,用起来确实很方便,但是作为初学者,你必须懂得它们背后的运行逻辑! 1 常规操作 (1)遍历 arr [1,2,3,4] # 以索引遍历:可以在遍历期间修改元素 for ind…...
设备指纹破解企业面临的隐私与安全双重危机
在数字经济高速发展的今天,黑灰产攻击如影随形,个人隐私泄露、金融欺诈、电商刷单等风险事件频发。芯盾时代 “觅迹” 设备指纹全新升级,以跨渠道识别能力打破行业壁垒,为金融、电商、游戏等多场景构筑安全屏障。 黑灰产肆虐隐私…...
多功能气体检测报警系统,精准监测,守护安全
在化学品生产、石油化工、矿山、消防、环保、实验室等领域,有毒有害气体泄漏风险严重威胁工作人员和环境安全。化工企业生产中易产生大量可燃有毒气体,泄漏达一定浓度易引发爆炸、中毒等重大事故;矿井下瓦斯、一氧化碳等有害气体的浓度实时监…...
【HarmonyOS 5】鸿蒙中常见的标题栏布局方案
【HarmonyOS 5】鸿蒙中常见的标题栏布局方案 一、问题背景: 鸿蒙中常见的标题栏:矩形区域,左边是返回按钮,右边是问号帮助按钮,中间是标题文字。 那有几种布局方式,分别怎么布局呢?常见的思维…...
登顶中国:基于 Trae AI与 EdgeOne MCP 的全国各省最高峰攀登攻略博客构建实践
一、背景与目标 随着户外运动和登山活动的日益流行,越来越多的人希望挑战自然,体验登顶的乐趣。中国幅员辽阔,34个省级行政区(包括23个省、5个自治区、4个直辖市和2个特别行政区)拥有众多壮丽的山峰,其…...
iOS蓝牙技术实现及优化
以下是针对2025年iOS蓝牙技术实现的核心技术要点的深度解析,结合当前iOS 18(推测版本)的最新特性与开发实践,分模块结构化呈现: 一、硬件与协议层适配 BLE 5.3 支持 iOS 18默认支持蓝牙5.3协议,需注意&…...
STC单片机--仿真调试
目录 一、仿真介绍二、仿真步骤 一、仿真介绍 通常单片机的仿真有ST-Link、JTAG等,连接好线路之后,在keil的debug选项设置好就可以仿真了。但是,STC需要在STC-ISP软件上的仿真界面进行配置,然后才能在keil里正常仿真 二、仿真步骤…...
SecureCRT SFTP命令详解与实战
在日常的开发工作中,安全地进行文件传输是一个常见的需求。无论是部署应用到远程服务器,还是从生产环境下载日志文件分析问题,一个可靠的工具可以大大提高工作效率。今天,我们就来详细介绍如何使用SecureCRT内置的SFTP功能&#x…...
Unity Gizmos
简介 Gizmos 是Unity编辑器中的一种可视化调试工具,用于在场景视图(Scene View)中绘制辅助图形、图标或文本,帮助开发者直观理解游戏对象的位置、范围、逻辑关系等信息 核心功能 1. 辅助可视化调试 在场景视图中显示碰撞体、触…...
EEG设备的「减法哲学」:Mentalab Explore如何用8通道重构高质量脑电信号?
在脑电图(EEG)研究领域,选择适配的工具是推动研究进展的重要步骤。Mentalab Explore 以其便捷性和高效性,成为该领域的一项创新性解决方案。研究者仅用较少的 EEG 通道即可完成实验,并且能够确保数据的高质量。其搭载的…...
PDF文档压缩攻略
前言:早上花了一点时间网上搜索了一下压缩pdf文档大小的方法,发现大部分是利用第三方在线网页,上传文件付费压缩,同时缺乏文件保密性。 经实践,利用浏览器或者wps(不付费)即可轻松处理。 一、…...
vllm命令行启动方式并发性能实测
设备V100双卡,测试模型qwen2.5-7b,并发度为100。 表现如下: 单卡959.48token/s 双卡 使用 --pipeline-parallel-size 2 939.78token/s双卡 使用 --tensor-parallel-size 21084.82token/s双卡,两张卡分别跑一个接口,形成两个接口…...