TypeScript之高级类型

一、是什么

除了stringnumberboolean 这种基础类型外,在 typescript 类型声明中还存在一些高级的类型应用

这些高级类型,是typescript为了保证语言的灵活性,所使用的一些语言特性。这些特性有助于我们应对复杂多变的开发场景

二、有哪些

常见的高级类型有如下:

  • 交叉类型
  • 联合类型
  • 类型别名
  • 类型索引
  • 类型约束
  • 映射类型
  • 条件类型

交叉类型

通过 & 将多个类型合并为一个类型,包含了所需的所有类型的特性,本质上是一种并的操作

语法如下:

T & U

适用于对象合并场景,如下将声明一个函数,将两个对象合并成一个对象并返回:

function extend<T , U>(first: T, second: U) : T & U {let result: <T & U> = {}for (let key in first) {result[key] = first[key]}for (let key in second) {if(!result.hasOwnProperty(key)) {result[key] = second[key]}}return result
}

联合类型

联合类型的语法规则和逻辑 “或” 的符号一致,表示其类型为连接的多个类型中的任意一个,本质上是一个交的关系

语法如下:

T | U

例如 number | string | boolean 的类型只能是这三个的一种,不能共存

如下所示:

function formatCommandline(command: string[] | string) {let line = '';if (typeof command === 'string') {line = command.trim();} else {line = command.join(' ').trim();}
}

类型别名

类型别名会给一个类型起个新名字,类型别名有时和接口很像,但是可以作用于原始值、联合类型、元组以及其它任何你需要手写的类型

可以使用 type SomeName = someValidTypeAnnotation的语法来创建类型别名:

type some = boolean | stringconst b: some = true // ok
const c: some = 'hello' // ok
const d: some = 123 // 不能将类型“123”分配给类型“some”

此外类型别名可以是泛型:

type Container<T> = { value: T };

也可以使用类型别名来在属性里引用自己:

type Tree<T> = {value: T;left: Tree<T>;right: Tree<T>;
}

可以看到,类型别名和接口使用十分相似,都可以描述一个对象或者函数

两者最大的区别在于,interface只能用于定义对象类型,而 type 的声明方式除了对象之外还可以定义交叉、联合、原始类型等,类型声明的方式适用范围显然更加广泛

类型索引

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

interface Button {type: stringtext: string
}type ButtonKeys = keyof Button
// 等效于
type ButtonKeys = "type" | "text"

类型约束

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

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

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

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

映射类型

通过 in 关键字做类型的映射,遍历已有接口的 key 或者是遍历联合类型,如下例子:

type Readonly<T> = {readonly [P in keyof T]: T[P];
};interface Obj {a: stringb: string
}type ReadOnlyObj = Readonly<Obj>

上述的结构,可以分成这些步骤:

  • keyof T:通过类型索引 keyof 的得到联合类型 'a' | 'b'
  • P in keyof T 等同于 p in 'a' | 'b',相当于执行了一次 forEach 的逻辑,遍历 'a' | 'b'

所以最终ReadOnlyObj的接口为下述:

interface ReadOnlyObj {readonly a: string;readonly b: string;
}

条件类型

条件类型的语法规则和三元表达式一致,经常用于一些类型不确定的情况。

T extends U ? X : Y

上面的意思就是,如果 T 是 U 的子集,就是类型 X,否则为类型 Y

三、总结

可以看到,如果只是掌握了 typeScript 的一些基础类型,可能很难游刃有余的去使用 typeScript,需要了解一些typescript的高阶用法

并且typescript在版本的迭代中新增了很多功能,需要不断学习与掌握

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

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

相关文章

LoRaWan之LoRaMAC 的快速入门指南

概述 本快速入门指南简要介绍了 LoRaMAC 层的重要操作。示例部分提供了不同设备类别的完整示例。 初始化 LoRaMAC层的初始化函数是LoRaMacInitialization( LoRaMacPrimitives_t *primitives, LoRaMacCallback_t *callbacks, LoRaMacRegion_t region )。该函数具有三个参数:L…

企业通过ISO/IEC 27001的必要性阐述

文章目录 什么是ISO 27001?ISO 27001认证的必要性1&#xff0c;保护信息资产2&#xff0c;合规性要求3&#xff0c;提高客户信任4&#xff0c;降低安全风险5&#xff0c;提高内部效率6&#xff0c;改进供应链安全7&#xff0c;提高员工意识8&#xff0c;连续改进 推荐阅读 什么…

【Unity】Addressables资源管理笔记

【Unity】Addressables资源管理笔记 Addressables是一种用于管理资源的系统。允许以一种灵活的方式加载、卸载和管理资源&#xff0c;无论是场景、预制件、材质、纹理、音频剪辑等。 一、快速实现 安装Addressables插件 把对象添加到组 1&#xff09;打开AddressablesGroups面…

用Python做数据分析之数据统计

接下来说说数据统计部分&#xff0c;这里主要介绍数据采样&#xff0c;标准差&#xff0c;协方差和相关系数的使用方法。 1、数据采样 Excel 的数据分析功能中提供了数据抽样的功能&#xff0c;如下图所示。Python 通过 sample 函数完成数据采样。 2、数据抽样 Sample 是进行…

GB28181协议如何注册

前言 GB28181协议是视频监控领域的国家标准&#xff0c;本文将解析如何在FFmpeg中增加对GB28181协议的支持&#xff0c;使其可以与支持GB28181协议的设备进行通信与控制&#xff0c;实现设备的注册、保活以及流媒体的传输。 1.背景介绍 GB28181协议指的是国家标准GB/T 28181…

自定义类型结构体(上)

目录 结构体类型的声明结构体的概念结构体的声明特殊的声明结构的自引用 结构体变量的创建和初始化结构成员访问操作符 感谢各位大佬对我的支持,如果我的文章对你有用,欢迎点击以下链接 &#x1f412;&#x1f412;&#x1f412; 个人主页 &#x1f978;&#x1f978;&#x1…

2023年【R1快开门式压力容器操作】报名考试及R1快开门式压力容器操作实操考试视频

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 R1快开门式压力容器操作报名考试是安全生产模拟考试一点通总题库中生成的一套R1快开门式压力容器操作实操考试视频&#xff0c;安全生产模拟考试一点通上R1快开门式压力容器操作作业手机同步练习。2023年【R1快开门式…

BurpSuite超详细安装教程-功能概述-配置-使用教程---(附下载链接)

一、介绍 BurpSuite是渗透测试、漏洞挖掘以及Web应用程序测试的最佳工具之一&#xff0c;是一款用于攻击web 应用程序的集成攻击测试平台&#xff0c;可以进行抓包、重放、爆破&#xff0c;包含许多工具&#xff0c;能处理对应的HTTP消息、持久性、认证、代理、日志、警报。 二…

Windows11无法打开Photoshop CC 2017问题解决

情况描述&#xff1a; Windows11上&#xff0c;双击Photoshop CC 2017没反应 解决办法&#xff1a; 此时需要启动Windows的“事件查看器”来确认问题出在哪里。可以直接通过开始菜单搜索启动&#xff0c;也可以通过右键点击“此电脑”->“管理”&#xff0c;然后找到事件查…

代码随想录算法训练营第三十六天 | LeetCode 738. 单调递增的数字、贪心算法总结

​ 代码随想录算法训练营第三十六天 | LeetCode 738. 单调递增的数字、贪心算法总结 文章链接&#xff1a;单调递增的数字 贪心算法总结 视频链接&#xff1a;单调递增的数字 1. LeetCode 738. 单调递增的数字 1.1 思路 本题的贪心思路是什么&#xff1f;举个例子 32&#x…

Vue 2 vs Vue 3: 响应式系统的比较 ⚖️

Vue 2 vs Vue 3: 响应式系统的比较 ⚖️ Vue.js 是一个极为流行的前端框架&#xff0c;其响应式系统是其强大特性之一。然而&#xff0c;在 Vue 2 和 Vue 3 中&#xff0c;响应式系统的实现方式有所不同。Vue 2 使用 Object.defineProperty 实现数据劫持&#xff0c;而 Vue 3 …

java基础+数据库基础+系统+JVM问题

的哎的哎 1、基础部分 java线程池 队列的选择 答&#xff1a; SingleThreadPool:适用于多个任务顺序执行的场景。 它使用的是LinkedBlockingQueue<>()&#xff0c;无界的阻塞队列&#xff0c;就意味着会有内存溢出的风险。 FixedThreadPool: 适用于任务量固定耗时长的…

Find My移动硬盘|苹果Find My技术与移动硬盘结合,智能防丢,全球定位

当今已经是数据的时代&#xff0c;各种东西需要保存下来的很多&#xff0c;电脑、手机等设备更换频率也快&#xff0c;确实每个人都需要一个自己的"数据库"&#xff0c;而移动硬盘无疑是最有性价比、最简单使用的选择。移动硬盘一直是我们生活中不可或缺的存储工具&a…

DevChat:VSCode中基于大模型的AI智能编程助手

#AI编程助手哪家好&#xff1f;DevChat“真”好用# 文章目录 1. 前言2. 安装2.1 注册新用户2.2 在VSCode中安装DevChat插件2.3 设置Access Key 3. 实战使用4. 总结 1. 前言 DevChat是由Merico公司精心打造的AI智能编程助手。它利用了最先进的大语言模型技术&#xff0c;像人类…

WebSocketClient objects are not reuseable

好久没写东西&#xff0c;夜深了来冒个泡&#xff0c;先啰嗦几句。今天测试 Android App 的时候&#xff0c;发现推到后台不到一分钟再唤醒直接闪退&#xff0c;初次以为网络和GPS信号弱导致的&#xff08;当时是在地铁上进行的测试&#xff09;&#xff0c;之后在网络与GPS 信…

IDEA在service面板中不显示微服务的项目

在.idea文件夹下的workspace文件中的project标签内添加如下代码段&#xff0c;&#xff0c;重启idea即可看到所有服务出现在了service面板中 <component name"RunDashboard"><option name"configurationTypes"><set><option value&q…

干货来袭 只需套用模板就能制作的电子相册的网站

随着科技的不断发展&#xff0c;电子相册已经成为了我们生活中不可或缺的一部分。但是&#xff0c;制作电子相册的过程却往往让人感到头疼。那么&#xff0c;有没有一种简单易用的方法来制作电子相册呢&#xff1f;今天&#xff0c;就给大家介绍一款只需套用模板就能制作的电子…

opencv c++ canny 实现 以及与halcon canny的对比

Opencv和C实现canny边缘检测_opencv边缘增强-CSDN博客 一、canny实现步骤 1、图像必须是单通道的&#xff0c;也就是说必须是灰度图像 2、图像进行高斯滤波&#xff0c;去掉噪点 3、sobel 算子过程的实现&#xff0c;计算x y方向 、梯度&#xff08;用不到&#xff0c;但是…

使用springboot对Elasticsearch 进行索引的增、删、改、查

一 SpringBoot Elasticsearch 项目环境搭建 1.1 修改pom文件添加依赖 目前使用spring-boot-starter-parent版本为2.2.8.RELEASE 对应spring-data-elasticsearch版本为2.2.8.RELEASE&#xff0c;版本对应可以自行百度&#xff0c;如果不行直接用elasticsearch-rest-high-lev…

FlinkCDC系列:数据同步对部分字段的处理,只更新部分字段

在flinkCDC源数据配置中&#xff0c;只对表中的部分字段关注&#xff0c;通过监控部分字段进行数据更新或者不更新&#xff0c;对数据进行同步。主要通过以下两个参数&#xff1a; column.exclude.list 默认: 空字符串 一个可选的、以逗号分隔的正则表达式列表&#xff0c;与…