TypeScript高级类型:映射类型与条件类型

TypeScript 是一种强类型编程语言,它在JavaScript的基础上增加了静态类型系统,使得开发者在开发阶段就能捕捉到更多潜在的错误。映射类型和条件类型是TypeScript中两种高级类型,它们提供了强大的抽象和类型推断能力,使你能够创建更复杂和灵活的类型定义。

映射类型

映射类型允许你基于现有类型创建新的类型,通过对类型属性进行转换或添加/删除属性来实现。映射类型的基本语法如下:

typescript 复制代码
type MappedType<T> = {
  [P in keyof T]: // 转换规则
};

在这个模板中,MappedType是一个新的类型,它基于类型T的所有键keyof T进行映射。P in keyof T是一个索引类型,它遍历T的所有属性键。然后,你可以根据需要对每个属性键P应用转换规则。

示例:只读映射类型

假设我们有一个对象类型Person,我们想要创建一个新的类型ReadOnlyPerson,其中所有属性都是只读的:

typescript 复制代码
type Person = {
  name: string;
  age: number;
};

type ReadOnly<T> = {
  readonly [P in keyof T]: T[P];
};

type ReadOnlyPerson = ReadOnly<Person>;

在这个例子中,ReadOnly<T>类型定义了一个新的类型,其中T的所有属性都变成了只读属性。

示例:条件映射类型

映射类型也可以与条件类型一起使用,以根据条件应用不同的转换规则:

typescript 复制代码
type Nullable<T> = {
  [P in keyof T]?: T[P];
};

type RequiredNullable<T> = T extends object ? Nullable<T> : never;

在这个例子中,RequiredNullable类型只有在T是对象时才会将T的所有属性变为可选的;否则,它将返回never类型。

条件类型

条件类型允许你根据类型条件来选择不同的类型。条件类型的语法如下:

typescript 复制代码
type ConditionalType<T, U> = T extends U ? X : Y;

这里,T extends U是一个条件表达式,如果T可以赋值给U,则条件为真,类型X将被选择;否则,类型Y将被选择。

示例:Pick类型

Pick类型是从一个类型中挑选出特定的属性:

typescript 复制代码
type Pick<T, K extends keyof T> = {
  [P in K]: T[P];
};

type Person = {
  name: string;
  age: number;
  gender: string;
};

type NameAndAge = Pick<Person, "name" | "age">;

在这个例子中,NameAndAge类型只包含Person类型中的nameage属性。

示例:Extract类型

Extract类型用于从联合类型中提取符合特定条件的类型成员:

typescript 复制代码
type Extract<T, U> = T extends U ? T : never;

type All = string | number | boolean;
type StringOrNumber = Extract<All, string | number>;

在这里,StringOrNumber类型将从All联合类型中提取出stringnumber类型。

综合应用

映射类型和条件类型可以结合使用,以创建更复杂的类型变换。例如,创建一个类型,该类型将对象中的所有属性变为可选,但保留特定属性为必需:

typescript 复制代码
type MakeOptionalExcept<T, K extends keyof T> = {
  [P in keyof T]?: P extends K ? T[P] : undefined;
};

type Person = {
  name: string;
  age: number;
  gender: string;
};

type OptionalGenderPerson = MakeOptionalExcept<Person, "name" | "age">;

在这个例子中,OptionalGenderPerson类型将gender属性变为可选,但nameage属性仍然是必需的。

相关推荐
大布布将军19 小时前
⚡️ 性能加速器:利用 Redis 实现接口高性能缓存
前端·数据库·经验分享·redis·程序人生·缓存·node.js
Change!!19 小时前
uniapp写的h5,怎么根据页面详情,设置不同的标题
前端·uni-app·标题
浅箬19 小时前
uniapp 打包之后出现shadow-grey.png去除
前端·uni-app
梵得儿SHI20 小时前
(第五篇)Spring AI 核心技术攻坚:流式响应与前端集成实现【打字机】效果
前端·webflux·springai·流式响应技术·低延迟ai交互·reactive编程原理·streamapi设计
鹏多多20 小时前
一文搞懂柯里化:函数式编程技巧的解析和实践案例
前端·javascript·vue.js
前端码农一枚20 小时前
前端打包性能优化全攻略
前端
Roc.Chang20 小时前
终极指南:解决 Vue 项目中 “regenerator-runtime/runtime“ 缺失报错
前端·javascript·vue.js·webpack·前端工程
AAA阿giao20 小时前
从树到楼梯:数据结构与算法的奇妙旅程
前端·javascript·数据结构·学习·算法·力扣·
BD_Marathon20 小时前
Vue3组件(SFC)拼接页面
前端·javascript·vue.js
wregjru20 小时前
【C++】2.3 二叉搜索树的实现(附代码)
开发语言·前端·javascript