vue3第三十九节(TS中的高级类型,分类以及使用注意事项)

前言:为什么需要使用高级类型,正常的类型不能满足日常的业务需求,对于复杂的数据结构、函数签名、类型转换,我们需要使用高级类型来处理,常用的高级类型包含以下几种:
在这里插入图片描述

常用的类型定义
基本类型: 像 number、string、boolean 这样的基本类型,它们表示简单的数据。
对象类型: 可以使用对象字面量、接口、类等定义对象类型。

数组和元组: 具有内置的数组类型和元组类型,用于处理集合数据。

函数类型: 支持函数类型,包括参数类型和返回值类型。

1、交叉类型

是通过 & 符号,将多个类型或者方法合并为一个类型

如:
type Age = {age: number}
type Name = {name: string}
type job = stringtype Person = age & name & job此时 Person 包含了 age name job 的类型

使用于对象合并场景,比如声明一个函数,将两个对象合并为一个对象

<script lang="ts">function extend<T, U>(first:T, second:U): T&U {let result:<T & U> = {}for(let i in first) {result[i] = first[i]}for(let i in second) {if (!result.hasOwnProperty(i)) {result[i] = second[i]}}return result}
</script>

2、联合类型

表示一个值可以是多个类型 中的任意一个,通常使用 | 管道符 表示

type Result = number | string | boolean  
Result 的值只能是  number、string、boolean 中的一个,不能同时是两种或多种

3、映射类型

通过 in 关键字做类型的映射,遍历已有类型的key,或者遍历联合类型,通常与泛型一起使用,用于添加修改属性

<script lang="ts">
type Item = {readonly id: string,title:string
}type ReadOnlyItem<T> = {reaonly [key in keyof T]: T[key]
}type NewItem = ReadOnlyItem<Item>// 获取我们希望 自定义的类型在 使用时候是可选的
type Partial<T> = {[P in keyof T]?: T[P];
}
</script>

keyof T:通过类型索引 keyof 的得到联合类型 id | title
P in keyof T 等同于 p in id | title,相当于执行了一次 forEach 的逻辑,遍历 id | title, 从而进行修改获取最新的类型
最后得到的 NewItem为如下:

type NewItem =  {readonly id: string,readonly title:string
}

4、条件类型

条件类型允许通过 三元运算的方式 选择不同的类型,通常应用于泛型或者复杂类型

<script lang="ts">T extend U ? E : F // 如果 T是U的子集,那么就取 泛型 E 否则 取 泛型 F// 如定义一个booleantype IsBoolean<T> = T extend boolean ? true : falsetype E = isBoolean<string> // falsetype F = isBoolean<boolean> // true</script>

5、可辨识联合类型

在函数式编程中 我们通常会合并单例类型联合类型类型保护类型别名来创建一个叫做 可辨识联合的高级模式,它也称做 标签联合代数数据类型
通常需要满足 三个要素
A、具有普通的单例类型属性— 可辨识的特征
B、一个类型别名包含了那些类型的联合— 联合
C、此属性上的类型保护

<script lang="ts">
interface Square {kind: "square";size: number;
}
interface Rectangle {kind: "rectangle";width: number;height: number;
}
interface Circle {kind: "circle";radius: number;
}
// 先声明 三个接口。 每个接口都有 kind属性但有不同的字符串字面量类型。 kind属性称做 可辨识的特征或 标签。 其它的属性则特定于各个接口;
type Shape = Square | Rectangle | Circle;
// 现在我们使用可辨识联合:function area(s: Shape) {switch (s.kind) {case "square": return s.size * s.size; // 正方形面积case "rectangle": return s.height * s.width;case "circle": return Math.PI * s.radius ** 2;}
}// 若我们没有涵盖所有可辨识的类型时,我们希望编译器能够告知我们
// 使用 never 类型 做完整检查
function areaNever(x: never):never {throw new Error("Unexpected object:  " + x + "in Area")
}
// area 做如下修改
function area(s: Shape) {switch (s.kind) {case "square": return s.size * s.size; // 正方形面积case "rectangle": return s.height * s.width;case "circle": return Math.PI * s.radius ** 2;default: return areaNever(s)}
}
</script>

6、索引类型

keyof 类似于 Object.keys ,用于获取一个接口中 Key 的联合类型。

<script lang="ts">
interface Button {type: stringtext: string
}type ButtonKeys = keyof Button
// 等效于
type ButtonKeys = "type" | "text"
</script>

7、类型别名

类型别名会给类型起一个新的名字,可以作用于原始值,联合类型,元组以及其它任何你需要手写的类型;起别名是新建一个名字,由于引用那个类型;
可以使用 type SomeName = someValidTypeAnnotation的语法来创建类型别名

<script lang="ts">type age = number | stringconst b: age = true // 不能将类型 true分配给类型“some”const c: age = 'hello' // okconst d: age = 123 // ok// 泛型type Container<T> = { value: T };// 使用类型别名在属性中引用自己type Tree<T> = {value: T;left: Tree<T>;right: Tree<T>;}
</script>

8、类型约束

通过关键字 extend 进行约束,不同于在 class 后使用 extends 的继承作用,泛型内使用的主要作用是对泛型加以约束

<script>
type BaseType = string | number | boolean
// 这里表示 copy 的参数
// 只能是字符串、数字、布尔这几种基础类型
function copy<T extends BaseType>(arg: T): T {return arg
}
</script>

类型约束通常和类型索引一起使用,例如我们有一个方法专门用来获取对象的值,但是这个对象并不确定,我们就可以使用 extends 和 keyof 进行约束。

<script>function getValue<T, K extends keyof T>(obj: T, key: K) {return obj[key]}const obj = { a: 1 }const a = getValue(obj, 'a')
</script>

TypeScript 的高级类型是前端开发中的强大工具,可以帮助我们处理复杂的数据结构构建类型安全的应用程序和提高代码的可维护性。通过进一步学习交叉类型、联合类型、映射类型、条件类型等,我们可以更好地应用它们在实际项目中

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/26932.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【源码】html+JS实现:24小时折线进度图

<!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" content"widthdevice-width, initial-scale1.0"> <title>24小时折线进度图</title> <st…

基于SpringBoot3+Vue3宠物小程序宠物医院小程序的设计与实现

大家好&#xff0c;我是程序员小孟。 最近开发了一个宠物的小程序&#xff0c;含有详细的文档、源码、项目非常的不错&#xff01; 一&#xff0c;系统的技术栈 二&#xff0c;项目的部署教程 前端部署包&#xff1a;npm i 启动程序&#xff1a;npm run dev 注意事项&…

qmt量化交易策略小白学习笔记第30期【qmt编程之获取行业概念数据--如何获取板块分类信息数据以及板块成分股数据】

qmt编程之获取行业概念数据 qmt更加详细的教程方法&#xff0c;会持续慢慢梳理。 也可找寻博主的历史文章&#xff0c;搜索关键词查看解决方案 &#xff01; 感谢关注&#xff0c;咨询免费开通量化回测与获取实盘权限&#xff0c;欢迎和博主联系&#xff01; 获取行业概念数…

uniapp地图选择位置

直接上代码 通过一个点击事件调用官方api即可调用 点击调用成功后显示如下 然后选择自己所需要的位置即可

RAM IP核配置

REVIEW 之前已经学习过&#xff1a; ROM:FPGA寄存器 Vivado IP核-CSDN博客 串口接收&#xff1a;Vivado 串口接收优化-CSDN博客 1. 今日摸鱼计划 RAM创建与测试 小梅哥视频&#xff1a; 21C_嵌入式块存储器RAM介绍_哔哩哔哩_bilibili 21D_嵌入式块存储器RAM实现和仿真_哔哩…

在不使用js在情况下只用css实现瀑布流效果

使用到的是grid 布局&#xff0c;需要注意的是grid-template-rows: masonry; 目前只有Firefox 浏览器支持这个效果&#xff0c;而且还是一个实验性属性需要在设置里面开发实验性选项才行。 实例 <!DOCTYPE html> <html> <head><title>Document</ti…

为CAP面板添加简单的Authentication登录验证功能 C#|.net

终于搞定了CAP Dashboard的登录验证功能! 因为网上找不到简单的CAP Dashboard的登录验证功能,所以这个功能摸索着开发了好久。 这个Authentication认证功能,不仅适用于CAP面板,也适用于懒得开发登录页面,但是又需要简单用户名密码登录的网页。 做过后端的比较熟悉,CAP面…

告别“人治”时代,物业运维平台能否成为行业新标准?

随着数字化时代的飞速发展&#xff0c;智能化、数字化已经遍及所有的行业。物业服务企业也不例外&#xff0c;你是否还在想象物业运维工作依旧停留在手动报修、纸质记录的古老时代&#xff1f;那么&#xff0c;你就OUT了&#xff0c;物业运维平台已经悄然崛起&#xff0c;正在以…

《Brave New Words 》2.2 阅读理解的未来,让文字生动起来!

Part II: Giving Voice to the Social Sciences 第二部分&#xff1a;为社会科学发声 The Future of Reading Comprehension, Where Literature Comes Alive! 阅读理解的未来&#xff0c;让文字生动起来&#xff01; Saanvi, a ninth grader in India who attends Khan World S…

鸿蒙轻内核A核源码分析系列七 进程管理 (2)

本文先熟悉下进程管理的文件kernel\base\core\los_process.c中的内部接口&#xff0c;读读代码&#xff0c;做些记录。 1、LiteOS-A内核进程全局变量 ⑴是进程池&#xff0c;存放各个进程控制块LosProcessCB的信息。⑵处开始的g_freeProcess是空闲进程链表&#xff0c;挂载各…

【机器学习】简答

1.什么是机器学习&#xff1f; 机器学习致力于研究如何通过计算的手段&#xff0c;利用经验来改善系统自身的性能。“训练”与“预测”是机器学习的两个过程&#xff0c;“模型”则是过程的中间输出结果&#xff0c;“训练”产生“模型”&#xff0c;“模型”指导 “预测”。计…

算法体系-20 第二十节暴力递归到动态规划

前言 动态规划模型从尝试暴力递归到傻缓存到动态规划 四种模型和体系班两种模型一共六种模型 0.1 从左往右模型 0.2 范围讨论模型范围尝试模型 &#xff08;这种模型特别在乎讨论开头如何如何 结尾如何如何&#xff09; 玩家博弈问题&#xff0c;玩家玩纸牌只能那左或者右 0.3 …

【DrissionPage】Linux上如何将https改为http

最近有个老板找我做一个自动化的程序&#xff0c;要求部署到Linux上 这是一个http协议的网站&#xff0c;chrome在默认设置下&#xff0c;会将http的网站识别成不安全的内容&#xff0c;然后自动将http转化成https访问 但是&#xff0c;这个http的网站它的加载项里既有http的…

HAL库--内存保护(MPU)实验

MPU是内核外设&#xff0c;想获取相关资料只能从内核手册查找 MPU功能仅F7/H7系列具备 内存保护单元(MPU介绍) MPU基本介绍 说白了MPU用来管理内存和外设存储区的访问权限 MPU可配置保护8/16个内存区域(看芯片型号)&#xff0c;每个区域最小要求256字节&#xff0c;且每个区…

STL入门指南:从容器到算法的完美结合

目录 ​编辑 一、什么是STL 二、STL的版本 三、STL的六大组件 1. 容器&#xff08;Containers&#xff09;&#xff1a; 2. 算法&#xff08;Algorithms&#xff09;&#xff1a; 3. 迭代器&#xff08;Iterators&#xff09;&#xff1a; 4. 仿函数&#xff08;Functo…

安鸾学院靶场——安全基础

文章目录 1、Burp抓包2、指纹识别3、压缩包解密4、Nginx整数溢出漏洞5、PHP代码基础6、linux基础命令7、Mysql数据库基础8、目录扫描9、端口扫描10、docker容器基础11、文件类型 1、Burp抓包 抓取http://47.100.220.113:8007/的返回包&#xff0c;可以拿到包含flag的txt文件。…

天降流量于雀巢?元老品牌如何创新营销策略焕新生

大家最近有看到“南京阿姨手冲咖啡”的视频吗&#xff1f;三条雀巢速溶咖啡入杯&#xff0c;当面加水手冲&#xff0c;十元一份售出&#xff0c;如此朴实的售卖方式迅速在网络上走红。而面对这一波天降的热度&#xff0c;雀巢咖啡迅速做出了回应&#xff0c;品牌组特地去到了阿…

计算机SCI期刊,中科院3区,IF=5.6,审稿速度非常快

一、期刊名称 International Journal of Machine Learning and Cybernetics 二、期刊简介概况 期刊类型&#xff1a;SCI 学科领域&#xff1a;计算机科学 影响因子&#xff1a;5.6 中科院分区&#xff1a;3区 三、期刊征稿范围 控制论关注的是描述我们日常生活中无处不在…

迅狐跨境商城系统|全平台兼容|前端采用uni-app跨端框架,后端采用ThinkPHP5框架

高效实现全平台兼容的迅狐跨境商城系统 迅狐跨境商城系统是一款专为跨境电商企业设计的全平台兼容系统。其前端采用uni-app跨端框架&#xff0c;后端采用ThinkPHP5框架&#xff0c;旨在实现高效的开发和运营管理。 1. 全平台兼容的前端设计 迅狐跨境商城系统的前端采用uni-a…

STM32开发过程中碰到的问题总结 - 1

文章目录 前言1. 怎么生成keil下可以使用的文件和gcc下编译使用的makefile2. STM32的时钟树3.怎么查看keil5下的编译工具链用的是哪个4. Arm编译工具链和GCC编译工具链有什么区别吗&#xff1f;5. 怎么查看Linux虚拟机是x86的还是aarch646. 怎么下载gcc-arm的编译工具链7.怎么修…