TypeScript 类型进阶指南

上篇文章讲述了泛型的基础用法,下面是关于 TypeScript 泛型的一些高级知识点,简单介绍一下。

1. 条件类型中的泛型约束

条件类型 (T extends U ? X : Y) 是 TypeScript 的一种高级特性,它根据类型的条件返回不同的结果。这种约束在泛型中非常实用,可以根据 传入的类型 动态生成 结果类型。

使用场景:用于校验参数类型,例如动态生成函数响应类型,或在表单校验中提供不同的返回值提示。

🌰

type IsString<T> = T extends string ? 'yes' : 'no';type Result1 = IsString<number>; // "no"
type Result2 = IsString<string>; // "yes"

例子中,如果 T 是 string 类型,则 IsString<T> 返回 "yes",否则返回 "no"。

2. 分布式条件类型

当类型参数是联合类型时,条件类型会对联合类型的每个成员逐一应用条件,这称为分布式条件类型

使用场景:常用于过滤联合类型的成员。例如,在权限校验或数据解析中,排除不符合条件的类型成员。

🌰

type ExcludeStringOrNumber<T> = T extends string | number ? never : T;type Result = ExcludeStringOrNumber<string | boolean | number>; // boolean

例子中,T 被分解为 string、boolean 和 number,每个成员分别应用条件类型,然后合并结果。此处,string 和 number 被过滤掉,最终返回 boolean 类型。这种特性允许对联合类型的每个成员单独处理。

3. 递归泛型类型

TypeScript 支持通过递归来定义类型,在处理树形结构或嵌套数据时非常有用。

使用场景:用于定义无限嵌套的数组或对象类型,例如在 JSON 数据解析中动态定义嵌套数据的类型。

🌰

type Nested<T> = T | Nested<T>[];const data: Nested<string> = ['hello', ['world', ['!']]]; // 嵌套字符串数组

递归泛型 Nested<T> 可以处理无限层次的嵌套数据,确保每层嵌套的元素类型一致。

4. 分布式条件类型

在 TypeScript 中,条件类型会在联合类型上自动分发。具体来说,当条件类型的左侧是一个泛型参数(如 T),且 T 是联合类型时,TypeScript 会将每个联合成员单独放在条件类型中进行计算,并最终合并结果。这种特性被称为 分布式条件类型

分布式条件类型是一种对联合类型的每个组成部分单独应用条件逻辑的特性。在处理复杂类型推断和条件判断时非常有用。

当 T 是一个联合类型(如 string | number)时,TypeScript 会对联合类型的每个成员分别应用条件类型逻辑,而不是直接应用到整个联合类型上。

🌰:定义一个类型

type MyType<T> = T extends string ? '字符串类型' : '非字符串类型';type Result = MyType<string | number>;

变成了联合类型 string | number,所以 MyType<T> 会自动分解为:

MyType<string> | MyType<number>

然后对每个成员单独应用条件判断:

MyType<string>:string 满足 T extends string 的条件,返回 '字符串类型'。

MyType<number>:number  不满足 T extends string 的条件,返回 '非字符串类型'。

最终结果是:

type Result = '字符串类型' | '非字符串类型';

5. Mapped Types 与泛型组合

映射类型 是 TypeScript 的特性,允许对一个对象类型的每个属性进行操作。这种操作可以是增加属性修饰符(如 只读、可选)、更改属性值类型、重命名等。结合泛型,映射类型可以动态地根据输入类型生成新类型。

可读:🌰

type ReadonlyType<T> = {readonly [P in keyof T]: T[P];
};interface User {name: string;age: number;
}type ReadonlyUser = ReadonlyType<User>; // 所有属性变为只读 { readonly name: string; readonly age: number; }

keyof T 表示类型 T 的所有键组合的联合类型,[P in keyof T] 是对 T 类型的每个键 P 进行一次遍历,这种遍历称为“映射类型”,将对象的每个属性逐一映射到新类型中。

T[P] 表示 T 类型中键 P 对应的值的类型,也就是说,对于每个 P,保持其类型不变。

ReadonlyType<T> 会将对象的每个属性设置为只读。

可选:🌰

type OptionalType<T> = {[P in keyof T]?: T[P];
};type OptionalUser = OptionalType<User>;

6. 键值联合 (Key Remapping)

TypeScript 4.1 引入的键值联合特性,可以在映射类型中重映射键名。

使用场景:应用于从外部 API 获取数据并需要重命名字段名的场景。也可用于前端动态合成自定义字段。

🌰

type MappedType<T> = {[K in keyof T as `new_${K & string}`]: T[K];
};interface User {name: string;age: number;
}type NewUser = MappedType<User>; // { new_name: string; new_age: number }

这里,键值映射允许为 keyof T 的每个键加上 new_ 前缀,这种方法在重命名或动态合成属性名时非常有用。

7. infer 关键字

在 TypeScript 中,infer 常用在条件类型中,用于在类型推导过程中“推测”类型的一部分。它允许我们在复杂类型中提取出一部分类型信息并将其存储到一个局部类型变量中,可以对其进一步操作。这个特性在处理函数的参数类型、返回类型,或者对复杂数据结构进行类型提取时非常有用。

7.1 基本原理
// 基本格式
T extends SomeType<infer U> ? X : Y

- infer U:如果 T 满足 SomeType 的条件,那么 U 就是从 SomeType 中提取的类型。U 类型是一个局部变量,可以在条件类型的 true 分支(即 X)中使用。

- X 和 Y:是条件类型的返回值,根据 T 是否符合条件决定使用哪个分支。

🌰:假设有一个函数类型 (x: number) => string,希望提取它的返回类型,可以使用 infer 来实现。

type ReturnTypeOf<T> = T extends (...args: any[]) => infer R ? R : never;type MyFunction = (x: number) => string;
type Result = ReturnTypeOf<MyFunction>; // Result 被推导为 string

在上面的例子中,T 是传入的类型,如果 T 是一个函数类型(符合 (...args: any[]) => infer R 的形式),那么 提取 R 为返回类型。在 Result 中,返回类型为 string。

7.2 常见应用场景

1、提取函数的参数类型,生成一个包含所有参数类型的元组。

🌰

type ParametersOf<T> = T extends (...args: infer P) => any ? P : never;function greet(name: string, age: number): string {return `Hello ${name}, you are ${age} years old.`;
}type GreetParameters = ParametersOf<typeof greet>; // [string, number]

ParametersOf<T>:如果 T 是一个函数类型,则返回该函数的参数类型组成的元组 P。

2、提取 Promise 的返回值类型

🌰

type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;type Result1 = UnwrapPromise<Promise<number>>; // number
type Result2 = UnwrapPromise<number>; // number(非 Promise 类型,直接返回 T)

UnwrapPromise<T>:检查 T 是否为 Promise<infer U> 类型,如果是,则返回 U。

3、从嵌套结构中提取类型

在复杂的数据结构(例如嵌套数组、对象等)中,可以使用 infer 逐层提取出某个目标类型。

🌰

type ElementType<T> = T extends (infer U)[] ? U : T;type Result1 = ElementType<number[]>; // number
type Result2 = ElementType<string[][]>; // string
type Result3 = ElementType<boolean>; // boolean

ElementType<T>:检查 T 是否为数组类型 (infer U)[],如果是,则返回数组元素类型 U。

总结

以上是一些关于泛型复杂的知识点,包括条件类型、递归泛型和键值联合等特性,为 TypeScript 提供了丰富的类型控制能力,使代码更具复用性。简单介绍一下,大家感兴趣的话可以深入了解一下。

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

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

相关文章

mysql5 授权

1、允许来自任意网段的root用户远程连接 所有 数据库并拥有所有权限 格式&#xff1a;grant 权限 on 数据库.* to 用户名登录主机 identified by “密码”; mysql> grant all privileges on *.* to root% identified by 123456; mysql> flush privileges;2、只允许来自1…

Neo4j 和 Python 初学者指南:如何使用可选关系匹配优化 Cypher 查询

Neo4j 和 Python 初学者指南&#xff1a;如何使用可选关系匹配优化 Cypher 查询 查询需求分析目标查询结构 编写 Cypher 查询查询解析OPTIONAL MATCH 和 COALESCE 的作用 在 Python 中使用 Neo4j 驱动执行查询使用 neo4j 驱动的 Python 示例代码代码解析示例输出 总结 在使用 N…

Gradle 创建Spring Boot项目

在 Spring Boot 项目中&#xff0c;Gradle 插件可以让你更方便地管理依赖、打包、运行和测试 Spring Boot 应用。以下是如何使用 Spring Boot Gradle 插件的详细指南&#xff1a; 1. 引入 Spring Boot 插件 在 build.gradle 中引入 Spring Boot 插件可以为项目提供各种便捷的…

AUTOSAR CP Ethernet State Manager(EthSM)规范的主要功能以及工作原理导读

AUTOSAR Ethernet State Manager&#xff08;以下简称EthSM&#xff09;规范的主要功能 AUTOSAR Ethernet State Manager&#xff08;以下简称EthSM&#xff09;规范的主要功能包括&#xff1a; 通信控制 网络模式管理&#xff1a;为通信管理器&#xff08;ComM&#xff09;提…

第二十课 Vue组件中的data

Vue组件中的data Vue组件中的data是独立的&#xff0c;Vue官方不建议各单元互通数据&#xff0c;每个组件有各自的数据对象&#xff0c;类似于Vue示例中的data。 组件中的data对象 组件中的data必须是带有返回值的函数对象 基础示例 <div id"app"><tes…

速盾:游戏盾的功能和原理详解

速盾有一款专注于网络游戏安全的防护系统&#xff0c;它通过实时监测游戏网络流量和玩家行为&#xff0c;以及使用先进的算法和技术进行分析和识别&#xff0c;检测出各种外挂、作弊行为和恶意攻击&#xff0c;从而保障游戏的公平性和玩家的安全性。 速盾游戏盾的主要功能包括…

深度学习中的感受野:从基础概念到多层次特征提取

在深度学习&#xff0c;特别是计算机视觉任务中&#xff0c;感受野&#xff08;Receptive Field&#xff09;是一个至关重要的概念。它指的是在神经网络中某一层的神经元在输入图像上“看到”的区域大小。感受野的大小影响了网络能捕捉的特征层级&#xff0c;从而决定了它的特征…

VirtIO实现原理(1)

本文内容参考: VirtIO实现原理——PCI基础_virtio-pci-CSDN博客 QEMU源码全解析 —— virtio(3)_qemu virtio block bus-CSDN博客 特此致谢! 序言 本系列文章是笔者在看了网名为“享乐主”的VirtIO系列文章后决心要写的。这位博主的“VirtIO专栏”中博文的内容从技术层…

2024年双11激光投影仪哪个品牌最好?当贝新品震撼视觉的秘密武器

激光投影仪逐渐占据家庭娱乐生活的中心位置&#xff0c;以其超大屏优势与卓越的性能获得了众多消费者的青睐。双11购物狂欢节期间&#xff0c;正是入手一台高品质激光投影仪的好时机&#xff0c;各大厂商也纷纷推出了品牌新品&#xff0c;2024年双11激光投影仪怎么选&#xff1…

React的概念以及发展前景如何?

React是一个由Facebook开发的用于构建用户界面的的开源JavaScript库&#xff0c;它主要用于构建大型、动态的Web应用程序。React的主要特点是使用VirtualDOM&#xff08;虚拟DOM&#xff09;来优化性能&#xff0c;并使用声明式的编程方式来编写UI。 React的主要概念包括&#…

定位,堆叠,CSS精灵,过渡,光标(前端)

一.定位 1.作用 灵活改变盒子在网页中的位置 2.标签 position 3.属性值 &#xff08;1&#xff09;相对定位relative relative&#xff08;相对定位&#xff09;-----改变位置的参照物是原来的位置&#xff0c;挪动后原来的位置不托标&#xff0c;不被占用。 要配合top…

【C语言】位运算

我们在上学计算机的第一节课&#xff0c;就应该见过这些常见的运算符。然而&#xff0c;你可能有印象&#xff0c;但记不住众多操作符当中的位运算符&#xff0c;以及它们的作用和使用场景&#xff0c;我们的大脑会选择性地遗忘它认为没用的信息&#xff0c;存储下那些“有实际…

C#各版本汇总

C#版本.NET版本发布日期C# 1.0.NET Framework 1.02002-2-13C# 1.1.NET Framework 1.12003-4-24C# 2.0.NET Framework 2.02005-11-7.NET Framework 3.02007-11-6C# 3.0.NET Framework 3.52007-11-19C# 4.0.NET Framework 4.02010-4-12C# 5.0.NET Framework 4.52012-8-15C# 6.0.N…

量化交易系统开发-实时行情自动化交易-3.4.1.2.A股交易数据

19年创业做过一年的量化交易但没有成功&#xff0c;作为交易系统的开发人员积累了一些经验&#xff0c;最近想重新研究交易系统&#xff0c;一边整理一边写出来一些思考供大家参考&#xff0c;也希望跟做量化的朋友有更多的交流和合作。 接下来聊聊基于A股API获取交易数据。 …

2024-11-01 - 统一身份认证 - OpenLdap - 中间件 - 流雨声

摘要 2024-11-01 周五 杭州 暴雨 调查问卷: https://www.wjx.cn/vm/exIBFDM.aspx# 2024年转瞬即逝&#xff0c;可是生活还在继续&#xff0c;这里有一项关于人工智能和项目管理对于效能关系的调研问卷&#xff0c;AI 对工作的作用和影响。问卷不采集个人信息&#xff0c;在此…

【363】基于springboot的高校竞赛管理系统

摘 要 如今社会上各行各业&#xff0c;都喜欢用自己行业的专属软件工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。新技术的产生&#xff0c;往往能解决一些老技术的弊端问题。因为传统高校竞赛管理系统信息管理难度大&#xff0c;容错率低&am…

Could not create task ‘:shared_preferences_android:generateDebugUnitTestConfig‘

flutter项目使用shared_preferences库的时候&#xff0c;打开flutter项目中的android项目运行&#xff0c;会出现如下错误信息&#xff1a; A build operation failed. Could not create task :shared_preferences_android:generateDebugUnitTestConfig. Could not create…

qt QTextFrame详解

1. 概述 QTextFrame是Qt框架中用于表示文本框架的类。它允许在QTextDocument中创建和管理具有特定边界和格式的文本区域。QTextFrame可以包含文本、图像、表格或其他QTextFrame&#xff0c;从而提供丰富的文本布局和排版功能。QTextFrame通常与QTextCursor结合使用&#xff0c…

【JWT】Asp.Net Core中JWT刷新Token解决方案

Asp.Net Core中JWT刷新Token解决方案 前言方案一:当我们操作某个需要token作为请求头的接口时,返回的数据错误error.response.status === 401,说明我们的token已经过期了。方案二:实现用户无感知的刷新token值,我们希望当响应返回的数据是401身份过期时,响应阻拦器自动帮我…

linux,1.NFS和autofs,2.podman容器,3.http服务和虚拟web主机,4.内网DNS服务搭建

1.NFS和autofs 一.NFS服务器之间共享文件夹(服务端配置共享文件和权限,客户端进行挂载) 服务端1.安装包 nfs-utils2.服务器端,编写配置文件 /etc/exports/共享的文件路径 *(rw) 人(权限)允许所有客户端进行读写访问3.重启服务,并设置开机自启动客户端1.安装包 nfs-ut2.挂载mo…