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

TypeScript类型体操练习

历史小剧场

这个世界上,有两种人最痛苦,第一种是身居高位者,第二种是身居底层者,第一种人很少,第二种人很多。第一种人叫崇祯,第二种人叫百姓。
而最幸福的,就是中间那拨人,主要工作,叫做欺上瞒下,具体特点是,除了好事,什么都办;除了脸,什么都要。—《明朝那些事儿》

字符串模板与extends/infer

  • extends: 有两个作用:1、接口继承,2、类型判断(这篇文章主要是体现这个作用);
  • infer: 推导泛型参数,只在extends右边使用

案例

type str = "beyond";// 获开头
type getFirst<T> = T extends `${infer First}${infer Rest}`? First : never;
type FirstLetter = getFirst<str>; // type FirstLetter = "b"// 获取除开头的部分
type getRest<T> = T extends `${infer First}${infer Rest}` ? Rest : never;
type RestLetters = getRest<str>; // type RestLetters = "eyond"// 以y分隔
type Split<T> = T extends `${infer Front}y${infer Back}` ? Back : never;
type Splitted = Split<str>; // type Splitted = "ond"
判断开头
type startsWidth<str extends string, prefix extends string> = str extends `${prefix}${infer Rest}` ? true : false;
type startsWidthKong = startsWidth<"kong", "">; // type startsWidthKong = true
type StartsWithBe = startsWidth<str, "be">; //type StartsWithBe = true
type StartsWithC = startsWidth<str, "c">; // type StartsWithC = false
转为首字母大写
type UppercaseFirst<T extends string> = T extends `${infer First}${infer Rest}` ? `${Uppercase<First>}${Rest}` : never;
type UppercaseStr = UppercaseFirst<str>; // type UppercaseStr = "Beyond"
文本替换-替换第一个
type ReplaceOne<str extends string, from extends string, to extends string> = str extends `${infer Front}${from}${infer Rest}` ? `${Front}${to}${Rest}` : str;
type ReplaceStr = ReplaceOne<str, "o", "a">; // type ReplaceStr = "beyand"
键值对转索引 a=1 => {a:1}
type ConvertStrToRecord<str extends string> = str extends `${infer key}=${infer value}` ? { [k in key]: value } : never;
type ConvertStrToRecordStr = ConvertStrToRecord<"a=1">; 
// type ConvertStrToIndexStr = {// a: "1";
// }

as 重映射-索引的重命名

索引转大写
interface IOut {aaa: 1,bbb: 2,fun: () => void
}
type UpperKeys<T extends Record<string, any>> = {[K in keyof T as (T[K] extends Function ? K : Uppercase<K>)]: T[K]
}
type res = UpperKeys<IOut>;
// type res = {
//     AAA: 1;
//     BBB: 2;
//     fun: () => void;
// }
合并索引
interface IOut2 {ccc: 3,ddd: 4
}
type CombineIndex<A extends Record<string, any>, B extends Record<string, any>> = {[K in keyof A | keyof B] : K extends keyof A ? A[K] : K extends keyof B ? B[K] : never
}
type combine = CombineIndex<IOut, IOut2>;
// type combine = {
//     aaa: 1;
//     bbb: 2;
//     fun: () => void;
//     ccc: 3;
//     ddd: 4;
// }

巧用递归

文本替换-替换所有
type ReplaceAll<Str extends string, From extends string, To extends string> = Str extends `${infer Front}${From}${infer Rest}` ? `${Front}${To}${ReplaceAll<Rest, From, To>}` : Str;
type ReplaceAllStr = ReplaceAll<"12333333456", "3", "A">; // type ReplaceAllStr = "12AAAAAA456"
字符串反转
type Reverse<Str extends string, Res extends string = ""> = Str extends `${infer First}${infer Rest}` ? Reverse<Rest, `${First}${Res}`> : Res;
type ReverseStr = Reverse<"hello">; // type ReverseStr = "olleh"

综合

字符串解析-初级

例如:我们要将 a=1&b=2&c=3 转为 {a:1, b:2, c:3}
那么,我们要有按这三步走

  1. &分割取 键值对 处理
  2. 处理单个的 键值对 转换为 索引类型
  3. 把 转换后的 索引类型 合并
type Parse<Str extends string, Res extends Record<string, any> = {}> = Str extends `${infer One}&${infer Rest}` ?Parse<Rest, CombineIndex<Res, ConvertStrToRecord<One>>> :CombineIndex<Res, ConvertStrToRecord<Str>>type parseToRecord = Parse<"a=1&b=2&c=3">; // type parseToRecord = {a: "1", b: "2", c: "3"}
字符串解析-升级
  • 如果只有键没有值,则返回 {key: true};
  • 合并重复索引。例如 a=1&a=2 转为 {a: [‘1’, ‘2’]};
  • 合并的值不能重复。例如 a=1&a=2&a=2 转为 {a: [‘1’, ‘2’]};
type ConvertStrToRecordUp<Str extends string> = Str extends `${infer Key}=${infer Value}` ? { [K in Key] : Value } : Str extends `${infer Key}` ? { [K in Key]: true } : {};
type ConvertStrToRecordUpStr = ConvertStrToRecordUp<"a">;
// type ConvertStrToRecordUpStr = {
//     a: true;
// }// 合并重复索引
type CheckDuplicate<A extends Record<string, any>, B extends Record<string, any>> = keyof B extends keyof A ? AddR<A, B> : CombineIndex<A, B>;
type AddR<A extends Record<string, any>, B extends Record<string, any>> = {[K in keyof A] : K extends keyof B ?CheckInclue<A[K], B[K]> extends true ? A[K] :  // 重复索引,合并值,值不能重复A[K] extends any[] ? [...A[K], B[K]] : [A[K], B[K]] : A[K]
}type CheckInclue<A extends any[], B extends string> = A extends [infer First, ...infer Rest] ? First extends B ? true : CheckInclue<Rest, B> : false;
type checkIncludeDemo = CheckInclue<["a", "b", "c"], "a">; // type checkIncludeDemo = truetype ParseUp<Str extends string, Res extends Record<string, any> = {}> = Str extends `${infer One}&${infer Rest}` ?ParseUp<Rest, CheckDuplicate<Res, ConvertStrToRecordUp<One>>> :CheckDuplicate<Res, ConvertStrToRecordUp<Str>>type parseToRecordUp = ParseUp<"a=1&b&a=2&a=3&c&d=4&e&e=10&a=3">; 
// type parseToRecordUp = {
//     b: true;
//     c: true;
//     a: ["1", "2", "3"];
//     e: [true, "10"];
//     d: "4";
// }

相关文章:

TypeScript类型体操练习

历史小剧场 这个世界上&#xff0c;有两种人最痛苦&#xff0c;第一种是身居高位者&#xff0c;第二种是身居底层者&#xff0c;第一种人很少&#xff0c;第二种人很多。第一种人叫崇祯&#xff0c;第二种人叫百姓。 而最幸福的&#xff0c;就是中间那拨人&#xff0c;主要工作…...

leetcode231-Power of Two

题目 给你一个整数 n&#xff0c;请你判断该整数是否是 2 的幂次方。如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 如果存在一个整数 x 使得 n 2x &#xff0c;则认为 n 是 2 的幂次方。 示例 1&#xff1a; 输入&#xff1a;n 1 输出&#xff1…...

贪心算法简单介绍

贪心算法是一种在每一步选择中都采取当前状态下最优或最优近似的选择&#xff0c;以期望最终得到全局最优解的算法。贪心算法并不总能得到全局最优解&#xff0c;但在某些问题上&#xff0c;它可以得到全局最优解&#xff0c;并且比动态规划等其他方法更为简单和高效。 贪心算…...

眼底项目经验

眼底项目经验 可解释性不足问题眼底项目有多牛逼可解释性不足解法数据、算力、算法都免费送不仅预测当下&#xff0c;还能预测未来和慢病管理整合&#xff0c;形成一个实时健康检测生态 可解释性不足问题 今天下午和腾讯眼底项目人员讨论, 他们不准备做全身性的多疾种, 因为深…...

使用arco design实现动态列信息的表格

目录 1.说明 2.普通表格的实现 3.动态表格的实现 1.说明 在前端画面中&#xff0c;表格一般用来展示列表数据&#xff0c;并且可以实现分页&#xff0c;应用很广泛&#xff0c;关于表格的列信息&#xff0c;一般是固定的&#xff0c;也可以是变化的&#xff0c;根据后端传递…...

解决 fatal: Not a git repository (or any of the parent directories): .git 问题

解决方法&#xff1a;在命令行 输入 git init 然后回车就好了...

Spring 模拟管理Web应用程序

MVC&#xff1a;Model View Controller 1&#xff09;controller&#xff1a;控制层&#xff08;Servlet是运行服务器端&#xff0c;处理请求响应java语言编写技术&#xff09; 2&#xff09;service&#xff1a;业务层&#xff08;事务&#xff0c;异常&#xff09; 3&#xf…...

修改了vue3 <script setup>留言板

Лунная ночь <template><button class"edit_view_checkbox"><input type"checkbox" v-model"editshowInput" value"编辑" /></button><div class"editshowInput" v-if"editshowI…...

jQuery 常用API

一、jQuery 选择器 1、jQuery 基础选择器 原生JS获取元素方式很多&#xff0c;很杂&#xff0c;而且兼容性情况不一致&#xff0c;因此jQuery给我们做了封装&#xff0c;使获取元素统一标准 2、jQuery 层级选择器 3、隐式迭代 遍历内部 DOM 元素&#xff08;伪数组形式存储&am…...

内网安全-隧道搭建穿透上线内网穿透-nps自定义上线内网渗透-Linux上线-cs上线Linux主机

目录 内网安全-隧道搭建&穿透上线内网穿透-nps-自定义-上线NPS工具介绍搭建过程 nps原理介绍MSF上线CS上线 内网渗透-Linux上线-cs上线Linux主机1.下载插件2.导入插件模块3.配置监听器4.服务端配置5.配置C2监听器并生成木马6.执行木马 内网安全-隧道搭建&穿透上线 内网…...

【AHK V2】设计模式之命令模式

目录 情景剧场什么是命令模式优缺点优点缺点 使用命令模式的步骤命令模式代码示例合理使用AI工具自动生成代码 情景剧场 我们来设想一个场景&#xff1a; 你进入一家餐馆&#xff0c;餐馆只有老板一个人&#xff08;老板即厨师&#xff09;。 “老板&#xff0c;一份小炒肉&am…...

2024年5月20日 (周二) 叶子游戏新闻

《边境之塔》登陆Steam 复古风恐怖生存冒险DascuMaru制作并发行&#xff0c;一款低像素3D复古风恐怖生存冒险新游《边境之塔&#xff08;The Tower on the Borderland&#xff09;》登陆Steam正式推出&#xff0c;限时九折优惠&#xff0c;本作暂不支持中文。 勇魅出击&#xf…...

【SQL学习进阶】从入门到高级应用(二)

文章目录 简单查询查一个字段查多个字段查所有字段查询时字段可参与数学运算查询时字段可起别名as关键字省略as关键字别名中有空格别名中有中文 &#x1f308;你好呀&#xff01;我是 山顶风景独好 &#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xf…...

FL Studio v21.2.3.4004中文破解版百度网盘下载

FL Studio v21.2.3.4004中文破解版是一款完整的软件音乐制作环境或数字音频工作站 (DAW)。代表了超过 18 年的创新发展&#xff0c;它在一个软件包中提供了您创作、编曲、录制、编辑、混音和掌握专业品质音乐所需的一切。FL Studio v21.2.3.4004中文破解版现在是世界上最受欢迎…...

从0开始写一个环境保护网站的第3天(JAVAWEB)

1.目标 实现首页的环境保护原因的查询&#xff0c;和底部友情连接部分 2.实现 2.1建立数据库表格&#xff08;这里数据全是百度查询&#xff09; 环境保护原因表&#xff1a; 友情连接表&#xff1a;&#xff08;数据来源https://zhuanlan.zhihu.com/p/696243646&#xff0…...

Java中volatile关键字

保证了不同线程对这个变量进行操作时的可见性&#xff0c;即一个线程修改了某个变量的值&#xff0c;这新值对其他线程来说是立即可见的,volatile关键字会强制将修改的值立即写入主存。 1.volatile的可见性 一个典型的例子&#xff1a;永不停止的循环。 public class Forever…...

医院挂号就诊系统的设计与实现

前端使用Vue.js 后端使用SpiringBoot MyBatis 数据使用MySQL 需要项目和论文加企鹅&#xff1a;2583550535 医院挂号就诊系统的设计与实现_哔哩哔哩_bilibili 随着社会的发展&#xff0c;医疗资源分布不均&#xff0c;患者就诊难、排队时间长等问题日益突出&#xff0c;传统的…...

SpringBoot整合RabbitMQ的快速使用教程

目录 一、引入依赖 二、配置rabbitmq的连接信息等 1、生产者配置 2、消费者配置 三、设置消息转换器 四、生产者代码示例 1、配置交换机和队列信息 2、生产消息代码 五、消费者代码示例 1、消费层代码 2、业务层代码 在分布式系统中&#xff0c;消息队列是一种重要…...

pytorch比较操作

文章目录 常用的比较操作1.torch.allclose()2.torch.argsort()3.torch.eq()4.torch.equal()5.torch.greater_equal()6.torch.gt()7.torch.isclose()8.torch.isfinite()9.torch.isif()10.torch.isposinf()11.torch.isneginf()12.torch.isnan()13.torch.kthvalue()14.torch.less_…...

2024年4月—马克思主义基本原理概论真题及答案解析(上海自考)

目录 1.选择题 2.简答题 3.论述题 1.选择题 2.简答题...

一文读懂DMXAPI:一个Key接入300+大模型,开发者降本增效新选择

导语&#xff1a;在大模型应用爆发式增长的今天&#xff0c;开发者面临模型选择多、接入成本高、并发限制严、发票合规难等痛点。有没有一种方案&#xff0c;能让开发者"一次接入&#xff0c;全模型可用"&#xff1f;本文带你深入了解国内新兴的AI大模型聚合平台——…...

新手入门:用快马生成第一个交易平台风格的前端页面

今天想和大家分享一个特别适合前端新手的练手项目——用InsCode(快马)平台快速搭建一个简易的交易平台前端页面。作为一个刚接触金融科技开发的小白&#xff0c;我发现这种模拟真实业务场景的项目特别能激发学习兴趣。 项目目标拆解 这个模拟交易账户页面需要实现几个核心功能模…...

Cursor 2.2的Visual Editor实战:如何像改Figma一样,5分钟重构一个Vue/React页面布局

Cursor 2.2的Visual Editor实战&#xff1a;如何像改Figma一样&#xff0c;5分钟重构一个Vue/React页面布局 重构老旧前端页面就像给老房子翻新——既要保留主体结构&#xff0c;又要让外观焕然一新。传统方式下&#xff0c;我们不得不在代码编辑器与浏览器之间反复切换&#x…...

飞腾FT2000/4外部中断开发避坑指南:如何高效处理16个中断信号

飞腾FT2000/4外部中断开发避坑指南&#xff1a;如何高效处理16个中断信号 在嵌入式系统开发中&#xff0c;中断处理机制的设计往往直接决定了系统的实时性和可靠性。飞腾FT2000/4处理器作为国产高性能芯片的代表&#xff0c;其外部中断功能在实际应用中展现出独特优势&#xff…...

DAMO-YOLO智能视觉系统作品集:多场景零售货架检测效果惊艳展示

DAMO-YOLO智能视觉系统作品集&#xff1a;多场景零售货架检测效果惊艳展示 1. 零售视觉检测的新标杆 走进现代零售空间&#xff0c;商品陈列的艺术背后隐藏着复杂的运营挑战。传统的人工巡检方式已经难以满足快节奏零售环境的需求&#xff0c;这正是DAMO-YOLO智能视觉系统大放…...

Muzei故障排除大全:20个常见问题及其解决方案的完整列表

Muzei故障排除大全&#xff1a;20个常见问题及其解决方案的完整列表 【免费下载链接】muzei Muzei Live Wallpaper for Android 项目地址: https://gitcode.com/gh_mirrors/mu/muzei Muzei是一款优秀的Android动态壁纸应用&#xff0c;它能为您的手机主屏幕带来每日更新…...

成电计算机复试面试:如何用一份‘心机’简历引导老师提问,并提前准备好答案?

计算机复试策略&#xff1a;如何用结构化简历设计引导面试走向 站在电子科技大学计算机复试的考场外&#xff0c;大多数考生都在反复背诵技术概念和项目细节&#xff0c;却很少有人意识到——面试本质上是一场精心设计的对话博弈。那些最终获得高分的考生&#xff0c;往往不是知…...

别再死磕公式了!用Python+SymPy从零推导6轴机械臂的DH参数与正逆解(附完整代码)

用PythonSymPy自动化推导6轴机械臂运动学&#xff1a;从DH参数到八组逆解实战 机械臂运动学分析是机器人开发中最烧脑的环节之一。传统手工推导DH参数矩阵不仅容易出错&#xff0c;验证过程更是令人崩溃——想象一下&#xff0c;当你花了两天时间推导出十几页公式&#xff0c;…...

2026前端面试题

1.vue的通信方式Vue组件通信方式根据组件间的关系&#xff08;父子、兄弟、跨级、任意组件&#xff09;可分为多种方案。一、父子组件通信props&#xff08;父-子&#xff09;父组件通过属性向子组件传递数据&#xff0c;子组件通过defineProps接收<!-- 父组件 --> <C…...

Cursor Pro破解工具:如何通过开源技术方案实现AI编程助手无限制使用?

Cursor Pro破解工具&#xff1a;如何通过开源技术方案实现AI编程助手无限制使用&#xff1f; 【免费下载链接】cursor-free-vip [Support 0.45]&#xff08;Multi Language 多语言&#xff09;自动注册 Cursor Ai &#xff0c;自动重置机器ID &#xff0c; 免费升级使用Pro 功能…...