《现代Typescript高级教程》高级类型

简介: 高级类型映射类型(Mapped Types)映射类型(Mapped Types)是 TypeScript 中一种强大的类型操作工具,它允许我们在编译时转换已知类型的属性,并创建一个新的类型。通过映射类型,我们可以对已有类型的属性进行转换、修改或添加新的属性。这在许多情况下都非常有用,例如将属性变为只读或可选,从现有属性中选择一部分属性等。映射类型的语法形式为

高级类型

映射类型(Mapped Types)

映射类型(Mapped Types)是 TypeScript 中一种强大的类型操作工具,它允许我们在编译时转换已知类型的属性,并创建一个新的类型。通过映射类型,我们可以对已有类型的属性进行转换、修改或添加新的属性。这在许多情况下都非常有用,例如将属性变为只读或可选,从现有属性中选择一部分属性等。

映射类型的语法形式为:

type NewType = {
  [Property in keyof ExistingType]: TransformType;
};

 其中,NewType 是我们要创建的新类型,PropertyExistingType 的键,TransformType 是对应属性的转换类型。

下面是一些常见的映射类型的示例:

1. Readonly

Readonly 是 TypeScript 内置的一个映射类型,它将给定类型的所有属性变为只读。

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

示例使用:

interface Person {
  name: string;
  age: number;
}
type ReadonlyPerson = Readonly<Person>;
const person: ReadonlyPerson = {
  name: "John",
  age: 30,
};
person.name = "Alice";  // Error: Cannot assign to 'name' because it is a read-only property.

2. Partial

Partial 是另一个内置的映射类型,它将给定类型的所有属性变为可选。

type Partial<T> = {
  [P in keyof T]?: T[P];
};

示例使用:

interface Person {
  name: string;
  age: number;
}
type PartialPerson = Partial<Person>;
const person: PartialPerson = {
  name: "John",
};
person.age = 30;  // Valid: age is optional

3. Pick

Pick 是一个映射类型,它从给定类型中选择一部分属性来创建新类型。

type Pick<T, K extends keyof T> = {
  [P in K]: T[P];
};

示例使用:

interface Person {
  name: string;
  age: number;
  occupation: string;
}
type PersonInfo = Pick<Person, "name" | "age">;
const info: PersonInfo = {
  name: "John",
  age: 30,
};

4. Record

Record 是一个映射类型,它根据指定的键类型和值类型创建一个新的对象类型。

type Record<K extends keyof any, T> = {
  [P in K]: T;
};

示例使用:

type Weekday = "Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday";
type WorkingHours = Record<Weekday, string>;
const hours: WorkingHours = {
  Monday: "9am-6pm",
  Tuesday: "9am-6pm",
  Wednesday: "9am-6pm",
  Thursday: "9am-6pm",
  Friday: "9am-5pm",
};

条件类型(Conditional Types)

它允许我们根据类型的条件判断结果来选择不同的类型。条件类型的语法形式为:

T extends U ? X : Y

其中,T 是待检查的类型,U 是条件类型,X 是满足条件时返回的类型,Y 是不满足条件时返回的类型。条件类型通常与泛型一起使用,以便根据不同的类型参数值进行类型推断和转换。

条件类型与infer

当我们在 TypeScript 中使用条件类型时,有时候我们希望从某个类型中提取出一个部分类型并进行推断。这时就可以使用infer关键字。

infer关键字用于声明一个类型变量,在条件类型中表示待推断的部分类型。它通常在条件类型的分支中使用,以便从给定类型中提取和推断出某些信息。

下面是一个示例,展示了如何使用infer关键字:

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;
function add(a: number, b: number): number {
  return a + b;
}
type AddReturnValue = ReturnType<typeof add>;  // 推断为number类型

在上面的示例中,我们定义了一个条件类型ReturnType<T>,它接受一个函数类型T作为输入。当T是一个函数类型时,我们使用infer R声明一个类型变量R来推断函数的返回类型,并将其作为结果返回。

通过调用ReturnType<typeof add>,我们将函数add的类型传递给ReturnType<T>,从而提取并推断出其返回类型。结果AddReturnValue的类型被推断为number,因为add函数返回一个数字。

infer关键字的作用是告诉 TypeScript 编译器在条件类型中推断一个待定的类型,并将其赋值给声明的类型变量。这使得我们可以在条件类型中使用这个推断出的类型进行进一步的类型操作。

需要注意的是,infer关键字只能在条件类型的右侧使用,用于声明一个待推断的类型变量,而不能在其他地方使用。此外,每个条件类型只能使用一次infer关键字,并且通常与泛型一起使用。

infer关键字是 TypeScript 中用于提取并推断待定类型的工具。它允许我们在条件类型中声明一个类型变量,用于在类型推断过程中捕获和使用待推断的类型,从而使类型系统更加灵活和强大。

模板字面量类型(Template Literal Types)

模板字面量类型(Template Literal Types)是 TypeScript 4.1 引入的新特性,它允许我们在类型级别上操作字符串字面量类型。通过使用模板字面量类型,我们可以创建基于字符串模板的复杂类型。

下面是一个使用模板字面量类型的示例:

type Greeting<T extends string> = `Hello, ${T}!`;
type GreetingWorld = Greeting<'World'>;  // GreetingWorld的类型为"Hello, World!"

在上面的示例中,我们定义了一个模板字面量类型Greeting<T>,它接受一个字符串类型参数T,并使用字符串模板将其包装在Hello,!之间。通过使用Greeting<'World'>,我们可以将字符串字面量类型'World'传递给模板字面量类型,从而创建一个具体的类型GreetingWorld,它的类型被推断为"Hello, World!"

模板字面量类型还支持模板字符串的拼接、条件语句、循环等操作,使得我们可以在类型级别上创建更加动态和复杂的类型。

 type Pluralize<T extends string> = `${T}s`;
type Message<T extends boolean> = T extends true ? 'Enabled' : 'Disabled';
type Plural = Pluralize<'apple'>;  // Plural的类型为"apples"
type EnabledMessage = Message<true>;  // EnabledMessage的类型为'Enabled'

在上面的示例中,我们定义了两个模板字面量类型,Pluralize<T>用于将字符串类型T转换为其复数形式,Message<T>用于根据布尔类型参数T返回不同的消息。

目录
相关文章
|
2月前
|
前端开发 JavaScript 安全
TypeScript在React Hooks中的应用:提升React开发的类型安全与可维护性
【7月更文挑战第17天】TypeScript在React Hooks中的应用极大地提升了React应用的类型安全性和可维护性。通过为状态、依赖项和自定义Hooks指定明确的类型,开发者可以编写更加健壮、易于理解和维护的代码。随着React和TypeScript的不断发展,结合两者的优势将成为构建现代Web应用的标准做法。
|
14天前
|
JavaScript 前端开发 编译器
TypeScript教程(一)在vscode中的配置TypeScript环境
本文是一篇TypeScript入门教程,介绍了在VS Code中配置TypeScript环境的步骤,包括安装Node.js、使用npm安装TypeScript、配置npm镜像源、安装VS Code的TypeScript扩展,以及创建和运行一个简单的TypeScript "Hello World"程序。
TypeScript教程(一)在vscode中的配置TypeScript环境
|
14天前
|
资源调度 JavaScript 前端开发
TypeScript实战教程(一):表单上传与后端处理
本文是TypeScript实战教程的第一部分,介绍了使用TypeScript进行表单上传和后端处理的完整流程,包括环境配置、前端表单创建、使用TypeScript和Express框架搭建服务端、处理表单数据,并提供了详细的代码示例和运行测试方法。
TypeScript实战教程(一):表单上传与后端处理
|
30天前
|
JavaScript
TypeScript——不能将类型“HTMLElement | null”分配给类型“HTMLElement”
TypeScript——不能将类型“HTMLElement | null”分配给类型“HTMLElement”
26 4
|
11天前
|
JavaScript 前端开发 编译器
Angular 与 TypeScript 强强联手太厉害啦!强类型编程带来巨大开发优势,快来一探究竟!
【8月更文挑战第31天】作为一名前端开发者,我致力于探索各种技术框架以提升开发效率与代码质量。近期深入研究了Angular与TypeScript的结合,体验到强类型编程带来的显著优势。Angular是一款强大的前端框架,而TypeScript则是由微软开发的一种强类型语言,为JavaScript增添了静态类型检查等功能。
20 0
|
1月前
|
JavaScript 编译器
typescript 解决变量多类型访问属性报错--工作随记
typescript 解决变量多类型访问属性报错--工作随记
|
21天前
|
JavaScript 前端开发 安全
TypeScript:解锁JavaScript的超级英雄模式!类型系统如何化身守护神,拯救你的代码免于崩溃与混乱,戏剧性变革开发体验!
【8月更文挑战第22天】TypeScript作为JavaScript的超集,引入了强大的类型系统,提升了编程的安全性和效率。本文通过案例展示TypeScript如何增强JavaScript:1) 显式类型声明确保函数参数与返回值的准确性;2) 接口和类加强类型检查,保证对象结构符合预期;3) 泛型编程提高代码复用性和灵活性。这些特性共同推动了前端开发的标准化和规模化。
43 0
|
29天前
|
JavaScript
TypeScript——Record类型
TypeScript——Record类型
31 0
|
1月前
|
JavaScript 前端开发 编译器
Typescript 回调函数、事件侦听的类型定义与注释--拾人牙慧
Typescript 回调函数、事件侦听的类型定义与注释--拾人牙慧
|
2月前
|
JavaScript 开发者 索引
TypeScript接口与类型别名:深入解析与应用实践
【7月更文挑战第10天】TypeScript的接口和类型别名是定义类型的关键工具。接口描述对象结构,用于类、对象和函数参数的形状约束,支持可选、只读属性及继承。类型别名则为复杂类型提供新名称,便于重用和简化。接口适合面向对象场景,类型别名在类型重用和复杂类型简化时更有优势。选择时要考虑场景和灵活性。