TypeScript基础知识:高级数据类型

        TypeScript 是一种静态类型检查的 JavaScript 超集,它提供了许多强大的高级数据类型,可以帮助我们更好地定义和操作数据。本文将深入介绍 TypeScript 的高级数据类型,包括交叉类型、联合类型和映射类型,并通过示例代码演示它们的用法和优势。

一、交叉类型(Intersection Types

        交叉类型用于将多个类型合并为一个新的类型。通过使用 & 符号,我们可以将多个类型进行交叉操作。交叉类型的结果是一个包含了所有交叉类型成员的新类型。

interface Person {name: string;age: number;
}interface Employee {companyId: string;position: string;
}type EmployeePerson = Person & Employee;const employeePerson: EmployeePerson = {name: "John",age: 30,companyId: "ABC123",position: "Manager",
};

在上面的示例中,我们定义了 Person  Employee 接口,然后使用交叉类型 EmployeePerson 将它们合并为一个新的类型。这样,EmployeePerson 类型就同时具有了 Person  Employee 接口中的属性和方法。

二、联合类型(Union Types

        联合类型允许一个值具有多种可能的类型。通过使用 | 符号,我们可以将多个类型定义为一个联合类型。当我们需要处理多个类型的值时,联合类型非常有用。

type Status = "success" | "error" | "loading";function getStatusMessage(status: Status): string {switch (status) {case "success":return "Operation successful";case "error":return "An error occurred";case "loading":return "Loading data";default:throw new Error("Invalid status");}
}const successMessage = getStatusMessage("success");
console.log(successMessage); // Output: "Operation successful"

在上述示例中,我们定义了一个 Status 类型,它只能取三个字符串字面量值之一。然后,我们编写了一个函数 getStatusMessage,它接受一个 Status 类型的参数,并返回相应的消息。通过使用联合类型,我们可以在函数内部使用 switch 语句来处理不同的状态。

三、映射类型(Mapped Types

        映射类型允许我们基于现有类型创建新类型。通过使用泛型和索引签名,我们可以对现有类型的属性进行修改、添加或删除。

interface Person {name: string;age: number;
}type ReadonlyPerson = Readonly<Person>;
// ReadonlyPerson: { readonly name: string; readonly age: number; }type PartialPerson = Partial<Person>;
// PartialPerson: { name?: string; age?: number; }type PickPerson = Pick<Person, "name">;
// PickPerson: { name: string; }type RecordPerson = Record<"id", Person>;
// RecordPerson: { id: Person; }

在上面的示例中,我们使用了几个常见的映射类型。Readonly<T> 将属性设置为只读,Partial<T> 将属性设置为可选,Pick<T, K>  T 中选择指定的属性,Record<K, T> 将属性值映射到指定的类型。

总结

        本文介绍了 TypeScript 的高级数据类型,包括交叉类型、联合类型和映射类型。通过合理地运用这些高级数据类型,我们可以更好地定义和操作数据,提高代码的可读性和可维护性。希望这篇文章对你理解 TypeScript 的高级数据类型有所帮助。

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

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

相关文章

【C/C++】C语言的高级编程(内存分区,指针)

C语言的高级编程【内存&#xff0c;指针】 基本知识变量gcc size工具 内存分区指针相关定义和赋值指针加法函数指针多级指针数组指针传参 基本知识 变量 变量解释全局变量出现在代码块{}之外的变量就是全局变量局部变量一般情况下&#xff0c;代码块{}内部定义的变量就是自动…

车载音频EMI的产生及典型音频功放AW836XX的解决方案

之前针对 eCall的文章中有提到D类音频功放需要关注EMI问题&#xff08;点击文章回看《车载eCall系统音频应用解决方案》&#xff09;&#xff0c;在此展开此问题并寻求解决方案。 1. EMI定义与分类 电磁干扰&#xff08;Electromagnetic Interference&#xff0c;EMI&#xff…

基于STM32的HX711示值放大器接口与驱动程序设计

将HX711示值放大器接口与STM32微控制器进行连接和驱动需要一定的硬件连接和软件编程。在这篇文章中&#xff0c;我们将介绍如何设计基于STM32的HX711示值放大器接口与驱动程序&#xff0c;并提供相应的代码示例。 1. 硬件连接 首先&#xff0c;我们需要将HX711示值放大器与STM…

openlayers [二] 初始化map 以及map的一些参数

文章目录 map 参数效果图代码分析 map 参数 controls 地图的控件 pixelRatio 设备上物理像素与设备无关像素&#xff08;dip&#xff09;之间的比率。 interactions 地图的互动 keyboardEventTarget 监听键盘事件的元素。这决定了KeyboardPan和 KeyboardZoom互动的触发时间。例…

残差网络 ResNet

目录 1.1 ResNet 2.代码实现 1.1 ResNet 如上图函数的大小代表函数的复杂程度&#xff0c;星星代表最优解&#xff0c;可见加了更多层之后的预测比小模型的预测离真实最优解更远了&#xff0c; ResNet做的事情就是使得模型加深一定会使效果变好而不是变差。 2.代码实现 impo…

SpringMVC-05

Spring MVC拦截器是在请求到达处理器前或返回客户端前执行的组件&#xff0c;它可以用于拦截和处理请求&#xff0c;实现一些通用的功能。 Spring MVC拦截器可以实现的功能包括&#xff1a; 登录验证&#xff1a;拦截所有请求&#xff0c;检查用户是否已登录&#xff0c;未登录…

网页设计(九)JavaScript基础应用

一、网页中文字的字号选择性改变 单击前初始状态页面 单击“中”链接后页面 文字素材&#xff1a;   JavaScript是一种能让你的网页更加生动活泼的程式语言&#xff0c;也是目前网页中设计中最容易学又最方便的语言。你可以利用JavaScript轻易的做出亲切的欢迎讯息、漂亮的…

web前端第二次

第一题&#xff1a; <!DOCTYPE html> <html> <head><title>计算奇数和</title> </head> <body><label for"input">请输入一个正整数&#xff1a;</label><input type"number" id"input&qu…

影响CSGO搬砖饰品价格上涨和下跌的原因有哪些

到底哪些情况下CSGO饰品价格会涨&#xff0c;哪些情况会跌&#xff0c;下面是一个混迹steam平台多年的老油条&#xff0c;一点个人见解&#xff0c;不喜吻喷。 首先&#xff0c;CSGO饰品的交易是从市场进行的&#xff0c;市场终究是市场&#xff0c;是自由买卖的&#xff0c;必…

VMware Vsphere 日志:用户 dcui@127.0.01已以vMware-client/6.5.0 的身份登录

一、事件截图&#xff1a; 二、解决办法 原因&#xff1a; 三、解决办法 1.开启锁定模式 2.操作 1、从清单中选择您的 ESXi 主机&#xff0c;然后转至管理 > 设置 > 安全配置文件&#xff0c;然后单击锁定模式的编辑按钮 2、在打开的锁定模式窗口中&#xff0c;选中启…

【Python】P4 异常处理

Python 异常处理 Python 中对于异常的处理主要通过 try-except、finally 和 raise 语句实现。 try-except 语句&#xff1a; 尝试执行一段代码&#xff0c;如果该代码块引发了异常&#xff0c;那么将跳过 try 代码块中剩余的代码&#xff0c;转而执行相应的 except 子句。 …

云服务器 云服务器概述-产品简介-文档中心-腾讯云

腾讯云服务器入门教程包括云服务器CPU内存带宽配置选择&#xff0c;选择云服务器CVM或轻量应用服务器&#xff0c;云服务器创建后重置密码、远程连接、搭建程序环境等&#xff0c;腾讯云服务器网txyfwq.com分享从0到1腾讯云服务器入门教程&#xff1a; 腾讯云服务器入门教程 …

C++中的引用及指针变量

目录 1.1 C中的引用 1.2 C中的指针变量&#xff08;pointer&#xff09; 1.1 C中的引用 C中的引用&#xff08;reference&#xff09;是一种特殊的变量&#xff0c;它是某个已存在变量的另一个名字。引用变量与指针变量类似&#xff0c;但引用变量必须在声明时进行初始化&…

CSDN 年度总结|知识改变命运,学习成就未来

欢迎来到英杰社区&#xff1a; https://bbs.csdn.net/topics/617804998 欢迎来到阿Q社区&#xff1a; https://bbs.csdn.net/topics/617897397 &#x1f4d5;作者简介&#xff1a;热爱跑步的恒川&#xff0c;致力于C/C、Java、Python等多编程语言&#xff0c;热爱跑步&#xff…

Python操作PDF的全面指南

引言&#xff1a; 在现代数字化时代&#xff0c;PDF&#xff08;Portable Document Format&#xff09;已成为一种常见的文档格式。无论是在工作中还是在学习中&#xff0c;我们经常需要处理和操作PDF文件。幸运的是&#xff0c;Python提供了许多强大的库和工具&#xff0c;可以…

「许战海矩阵战略洞察」吉香居给调味品企业带来的战略启示

引言&#xff1a;吉香居通过实施份额化战略和打造形象产品&#xff0c;在调味品行业中取得了成功。但品牌结构需要调整&#xff0c;需要将子品牌整合到吉香居主品牌下&#xff0c;共同提升品牌势能。此外&#xff0c;企业需保持主品牌竞争战略&#xff0c;以实现长期稳定的高速…

transfomer中正余弦位置编码的源码实现

简介 Transformer模型抛弃了RNN、CNN作为序列学习的基本模型。循环神经网络本身就是一种顺序结构&#xff0c;天生就包含了词在序列中的位置信息。当抛弃循环神经网络结构&#xff0c;完全采用Attention取而代之&#xff0c;这些词序信息就会丢失&#xff0c;模型就没有办法知…

进阶Docker4:网桥模式、主机模式与自定义网络

目录 网络相关 子网掩码 网关 规则 docke网络配置 bridge模式 host模式 创建自定义网络(自定义IP) 网络相关 IP 子网掩码 网关 DNS 端口号 子网掩码 互联网是由许多小型网络构成的&#xff0c;每个网络上都有许多主机&#xff0c;这样便构成了一个有层次的结构。 IP 地…

python实现屏幕颜色获取

为了实时监听鼠标移动并输出鼠标当前位置的颜色值&#xff0c;你可以结合使用pyautogui和pynput库。pynput库可以用来监听鼠标事件&#xff0c;而pyautogui则可以用来获取鼠标当前位置的屏幕颜色。 首先&#xff0c;你需要安装这两个库&#xff08;如果尚未安装&#xff09;&a…