TypeScript 常用高级类型

目录

前言: 

TypeScript 常用高级类型

基本概念

高级类型

1. 交叉类型(Intersection Types)

2. 联合类型(Union Types)

3. 映射类型(Mapped Types)

4. 条件类型(Conditional Types)

5. 可辨识联合(Discriminated Unions)

6. 映射类型(Template Literal Types)

7. 预定义条件类型

应用场景

注意事项

结语

特点 


 

前言: 

"TS" 是 TypeScript 的缩写,TypeScript 是一种由微软开发的开源编程语言。它是 JavaScript 的一个超集,意味着 TypeScript 包含了 JavaScript 的所有特性,并且在此基础上添加了静态类型和其他一些额外的特性。

TypeScript 常用高级类型

TypeScript(TS)是一种强类型超集 JavaScript 语言,它在前端开发中提供了强大的类型检查和类型抽象工具。其中,高级类型是 TypeScript 的一项强大功能,它们可以帮助我们处理复杂的数据结构、函数签名和类型变换。在本文中,我们将深入研究前端开发中的 TypeScript 常用高级类型,包括交叉类型、联合类型、映射类型、条件类型和更多。

基本概念

在探索 TypeScript 的高级类型之前,让我们回顾一下几个基本的类型概念。

  • 基本类型: TypeScript 包括像 numberstringboolean 这样的基本类型,它们表示简单的数据。

  • 对象类型: 可以使用对象字面量、接口、类等定义对象类型。

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

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

高级类型

1. 交叉类型(Intersection Types)

交叉类型用于将多个类型合并为一个类型。它通过 & 运算符实现,将多个类型的属性和方法合并在一个新类型中。

type User = { name: string; age: number };
type Admin = { role: string; isAdmin: true };type SuperUser = User & Admin;
// SuperUser 类型包含了 User 和 Admin 类型的属性
2. 联合类型(Union Types)

联合类型用于表示一个值可以属于多个类型之一。它通过 | 运算符实现。

type Result = number | string;
// Result 变量可以存储数字或字符串
3. 映射类型(Mapped Types)

映射类型允许您通过旧类型的属性来创建新类型。它通常与泛型一起使用,可以用于批量更改或添加属性。

type Options = {readonly id: number;title?: string;
};type MutableOptions = {-readonly [P in keyof Options]: Options[P];
};
// MutableOptions 移除了 id 属性的只读修饰符,但保留了其他属性
4. 条件类型(Conditional Types)

条件类型是 TypeScript 中的高级类型,它允许根据条件选择不同的类型。它常用于泛型和复杂类型逻辑。

type IsString<T> = T extends string ? true : false;
type A = IsString<string>; // true
type B = IsString<number>; // false
5. 可辨识联合(Discriminated Unions)

可辨识联合是一种用于处理不同类型的数据的高级模式。它通过一个共同的字段来标识不同的类型。

interface Circle {kind: "circle";radius: number;
}interface Square {kind: "square";sideLength: number;
}type Shape = Circle | Square;function getArea(shape: Shape) {if (shape.kind === "circle") {return Math.PI * shape.radius ** 2;} else {return shape.sideLength ** 2;}
}
6. 映射类型(Template Literal Types)

Template Literal Types 是 TypeScript 4.1 引入的,它们允许你将字符串字面量类型与模板字符串相结合,以生成新的字符串类型。

type Greeting = "Hello, " | "Hi, ";
type Name = "Alice" | "Bob";type Welcome = `${Greeting}${Name}`;
// Welcome 类型是 "Hello, Alice" | "Hello, Bob" | "Hi, Alice" | "Hi, Bob"
7. 预定义条件类型

TypeScript 4.1 引入了一些预定义的条件类型,如 ExtractExclude 和 ReturnType,它们可以用于提取类型信息、排除不需要的类型或获取函数的返回类型。

type T = Extract<"a" | "b" | "c", "a" | "c">; // "a" | "c"
type U = Exclude<"a" | "b" | "c", "a" | "c">; // "b"
type F = ReturnType<() => string>; // string

应用场景

高级类型在前端开发中有许多应用场景,包括:

  • 复杂数据处理: 交叉类型和联合类型可用于处理复杂的数据结构,如 API 响应和组合数据。

  • 类型安全的状态管理: 可辨识联合可用于构建类型安全的状态管理,如 Redux 中的动作。

  • 动态组件: 映射类型和条件类型可用于构建动态组件或高阶组件。

  • 字符串操作: Template Literal Types 可用于字符串操作,如国际化和路由生成。

  • 预定义条件类型: 预定义条件类型使代码更加可读和类型安全。

注意事项

高级类型是强大的工具,但在使用它们时需要小心谨慎。过度复杂的类型可能会导致难以理解和维护的代码。在项目中选择适当的类型抽象和高级类型取决于您的需求和团队的约定。

结语

TypeScript 的高级类型是前端开发中的强大工具,可以帮助我们处理复杂的数据结构、构建类型安全的应用程序和提高代码的可维护性。通过深入研究交叉类型、联合类型、映射类型、条件类型等,您可以更好地应用它们在实际项目中。希望这篇文章有助于您深入了解 TypeScript 的高级

特点 

TypeScript 主要的特点包括:

  1. 静态类型:TypeScript 引入了静态类型系统,允许开发者在编写代码时定义变量、函数参数和返回值的类型。这有助于在编译时发现潜在的类型错误,提高了代码的健壮性和可维护性。

  2. 类型推断:TypeScript 能够根据赋值操作的值推断出变量的类型,这使得在声明变量时不必显式指定类型,从而简化了代码。

  3. 增强的工具支持:TypeScript 提供了更好的编辑器支持和工具集成。许多流行的编辑器(如 VS Code、Sublime Text 等)都支持 TypeScript,能够提供代码补全、错误检查、重构等功能。

  4. ECMAScript 标准支持:TypeScript 严格遵循 ECMAScript 标准,支持最新的 JavaScript 特性和语法,开发者可以在 TypeScript 中使用 ECMAScript 6、7、8 等版本的语法。

  5. 面向对象编程的支持:TypeScript 支持面向对象编程的特性,包括类、接口、模块等,使得代码结构更加清晰和易于组织。

  6. 编译时类型检查:TypeScript 在编译阶段进行类型检查,能够发现潜在的类型错误,减少在运行时出现的错误。

总的来说,TypeScript 是 JavaScript 的一个超集,通过引入静态类型和其他特性,提供了更好的代码可维护性、可读性和可靠性,适合大型项目或团队合作开发。

 

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

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

相关文章

共筑首都绿色美好出行!苏州金龙再向北京交付33辆纯电动旅游大巴

应时而动&#xff0c;创新求变&#xff0c;方能始终屹立于市场。2023年&#xff0c;随着旅游市场的复苏&#xff0c;北京市旅游消费潜力进一步释放&#xff0c;客运需求量快速增长&#xff0c;与此同时绿色、高端、个性化旅游客车也成为市场趋势。 11月底&#xff0c;33辆苏州…

C++STL的list(超详解)

文章目录 前言构造函数capacitylist的访问insertswapsort 前言 看一下list, 在任意位置可以进行O(1)插入删除的操作。 它怎么实现这个东西&#xff1f;它其实就是一个带头双向循环链表。 #成员函数 构造函数 这里面的构造函数学完string和vector之后已经相当熟悉了。 capaci…

万户协同办公平台ezoffice wpsservlet接口任意文件上传漏洞

声明 本文仅用于技术交流&#xff0c;请勿用于非法用途 由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;文章作者不为此承担任何责任。 一、漏洞描述 万户ezOFFICE协同管理平台是一个综合信息基础应用平台&am…

51单片机定时器/计数器

51单片机的定时器/计数器 本文主要涉及51单片机的定时器/计数器的相关内容&#xff0c;主要包括定时器相关寄存器的相关配置以及定时器的配置代码参考。 文章目录 51单片机的定时器/计数器一、 CPU 时序知识二、 51 单片机定时器原理三、 51 单片机定时/计数器结构 51单片机的定…

一图看懂!生成式AI 算法现状

截至2023年8月&#xff0c;在算法备案系统登记的相关算法已经有151个&#xff0c;我们可以观察到All in AI的中国公司布局生成式AI算法的现状。在这151个算法中&#xff0c;33.8%的生成合成式算法都集中在文本生成领域&#xff0c;而图像、多媒体和音频方向也是各家的主攻方向之…

window系统,如何多开微信

window系统多开微信的方法其实有很多种&#xff0c;今天我们介绍一种超实用简单的方法多开微信。 方法: 用命令符打开多个微信的方法介绍 用命令符打开多个微信之前&#xff0c;需要先获取当前微信的安装目录地址。 右键微信图标&#xff0c;单击“属性”。 在目标文本框下可…

PDF控件Spire.PDF for .NET【转换】演示:将PDF彩色图像转换为灰度(黑白)

将包含彩色图像的 PDF 转换为灰度图像可以帮助您减小文件大小&#xff0c;并以更实惠的模式打印 PDF&#xff0c;而无需消耗彩色墨水。在本文中&#xff0c;您将了解如何使用Spire.PDF for .NET在 C# 和 VB.NET 中以编程方式实现转换。 Spire.Doc 是一款专门对 Word 文档进行操…

【数值计算方法(黄明游)】解线性代数方程组的迭代法(一):向量、矩阵范数与谱半径【理论到程序】

文章目录 一、向量、矩阵范数与谱半径1、向量范数a. 定义及性质补充解释范数差 b. 常见的向量范数 l 1 l_1 l1​、 l 2 l_2 l2​、 l ∞ l_\infty l∞​ 范数性质关系 2、矩阵范数a. 矩阵的范数b. 常见的矩阵范数相容范数算子范数 3、谱半径4、知识点总结1. 向量范数2. 矩阵范数…

数字图像处理(实践篇)二十二 使用opencv进行人脸、眼睛、嘴的检测

目录 1 xml文件 2 涉及的函数 3 实践 使用opencv进行人脸、眼睛、嘴的检测。 1 xml文件 方法① 下载 地址&#xff1a;https://github.com/opencv/opencv/tree/master/data/haarcascades 点击haarcascade_frontalface_default.xml文件 对着Raw右键&#xff0c;选择“链接…

和鲸科技携手深圳数据交易所,“数据+数据开发者生态”赋能人工智能产业发展

信息化时代&#xff0c;数据驱动决策的重要性日益凸显。通过利用数据可以深入了解市场需求、客户行为、竞争态势等关键信息&#xff0c;从而制定更为有效的战略和决策。围绕推动数据要素产业发展&#xff0c;近日&#xff0c;深圳数据交易所&#xff08;以下简称“深数所”&…

ALTERNET STUDIO 9.1 Crack

ALTERNET STUDIO 9.1 发布 宣布 AlterNET Studio 9.1 版本今天上线。AlterNET Studio 9.0 是一个中期更新&#xff0c;重点是改进我们所有的组件库。 以下是 AlterNET Studio 9.1 的发布亮点&#xff1a; Roslyn C# 和 Visual Basic 解析器现在支持代码修复/代码重构。 代码修复…

JVM虚拟机系统性学习-对象存活判断算法、对象引用类型和垃圾清除算法

垃圾回收 在 JVM 中需要对没有被引用的对象&#xff0c;也就是垃圾对象进行垃圾回收 对象存活判断算法 判断对象存活有两种方式&#xff1a;引用计数法、可达性分析算法 引用计数法 引用计数法通过记录每个对象被引用的次数&#xff0c;例如对象 A 被引用 1 次&#xff0c…

docker mysql8 设置不区分大小写

docker安装Mysql8.0的坑之lower_case_table_names_docker mysql lower_case_table_names-CSDN博客https://blog.csdn.net/p793049488/article/details/108365929 docker run ‐di ‐‐nametensquare_mysql ‐p 33306:3306 ‐e MYSQL_ROOT_PASSWORD123456 mysql

广东佛山开房屋租赁发票

我是20223年12月办理的&#xff0c;给大家做个参考。 一、准备材料 &#xff08;如果非房东本人办理&#xff0c;还需要房东签份授权书&#xff0c;多复印几份或者直接签多份&#xff0c;不然会被税务局收走&#xff09; 废话不多说&#xff0c;直接上图。 二、线上预约 附个…

变量与方法面试题

char 型变量中能不能存储一个中文汉字&#xff0c;为什么&#xff1f; char 类型可以存储一个中文汉字&#xff0c;因为 Java 中使用的编码是 Unicode&#xff08;不选择任何特定的编码&#xff0c;直接使用字符在字符集中的编号&#xff0c;这是统一的唯一方法&#xff09;&a…

内存cache大量使用问题导致应用异常问题

概述 28s应用崩溃查看内存使用有大量cache。 分析 查看free 信息平时的确存在大量cache使用的情况查看dmes信息发现filesendserver崩溃 崩溃信息为系统调用 查看到page allocation failure:order 5 同时也看到系统内存使用情况 查看到系统实际还有部分内存为空闲内存&am…

如何部署自己的服务渲染页面为Pdf文档

前言 相信大家都觉得官方发布的文档生成模块https://docs.mendix.com/appstore/modules/document-generation/很有用&#xff0c;它能把Mendix页面像素级导出到Pdf文件中&#xff0c;这对于归档等业务非常有价值。但部署依赖公有云提供的渲染服务&#xff0c;而中国本土用户对…

<软考高项备考>《论文专题 - 4 论文题目和框架》

1 大数据分析论文的题目 2 论文写作的基础 2.1 10大知识域、49个过程、5大过程组 领域启动计划执行监控收尾整合管理1.制定项目章程2.制订项目管理计划3.指导与管理项目工作4.管理项目知识5.监控项目工作6.实施整体变更控制7.结束项目或阶段范围管理1.规划范围管理2.收集需求…

mysql数据库学习笔记(1)

今天开始学mysql数据库&#xff0c;为什么要学这个呢&#xff0c;因为数据库可结构化存储大量的数据信息&#xff0c;方便用户进行有效的检索和访问。数据库可有效地保持数据信息的一致性、完整性、降低数据冗余。数据库可满足应用的共享和安全方面的要求&#xff0c;把数据放在…

《Spring Cloud Alibaba 从入门到实战》分布式消息(事件)驱动

分布式消息&#xff08;事件&#xff09;驱动 1、简介 事件驱动架构(Event-driven 架构&#xff0c;简称 EDA)是软件设计领域内的一套程序设计模型。 这套模型的意义是所有的操作通过事件的发送/接收来完成。 传统软件设计 举个例子&#xff0c;比如一个订单的创建在传统软…