带你读《现代TypeScript高级教程》八、高级类型(2)

简介: 带你读《现代TypeScript高级教程》八、高级类型(2)

带你读《现代TypeScript高级教程》八、高级类型(1)https://developer.aliyun.com/article/1348533?groupCode=tech_library


4 Record

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

type Record = {
  [P in K]: T;};

 

示例使用:

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

 

  1. 条件类型(Conditional Types)

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

 

T extends U ? X : Y

 

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

1条件类型与infer

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

 

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

 

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

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

 

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

 

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

 

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

 

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

 

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


带你读《现代TypeScript高级教程》八、高级类型(3)https://developer.aliyun.com/article/1348529?groupCode=tech_library

相关文章
|
10天前
|
JavaScript 编译器
TypeScript中类型守卫:缩小类型范围的艺术
【4月更文挑战第23天】TypeScript中的类型守卫是缩小类型范围的关键技术,它帮助我们在运行时确保值的精确类型,提升代码健壮性和可读性。类型守卫包括`typeof`(检查原始类型)、`instanceof`(检查类实例)和自定义类型守卫。通过这些方法,我们可以更好地处理联合类型、泛型和不同数据源,降低运行时错误,提高代码质量。
|
3天前
|
JavaScript 安全 前端开发
【TypeScript技术专栏】TypeScript中的类型推断与类型守卫
【4月更文挑战第30天】TypeScript的类型推断与类型守卫是提升代码安全的关键。类型推断自动识别变量类型,减少错误,包括基础、上下文、最佳通用和控制流类型推断。类型守卫则通过`typeof`、`instanceof`及自定义函数在运行时确认变量类型,确保类型安全。两者结合使用,优化开发体验,助力构建健壮应用。
|
3天前
|
JavaScript 前端开发 开发者
【TypeScript技术专栏】TypeScript类型系统与接口详解
【4月更文挑战第30天】TypeScript扩展JavaScript,引入静态类型检查以减少错误。其类型系统包括基本类型、数组等,而接口是定义对象结构的机制。接口描述对象外形,不涉及实现,可用于规定对象属性和方法。通过声明、实现接口,以及利用可选、只读属性,接口继承和合并,TypeScript增强了代码的健壮性和维护性。学习和掌握TypeScript的接口对于大型项目开发至关重要。
|
4天前
|
JavaScript 前端开发
TypeScript基础类型
TypeScript基础类型
|
4天前
|
JavaScript 前端开发
typescript 混合类型
typescript 混合类型
|
9天前
|
JavaScript 前端开发 开发者
类型检查:结合TypeScript和Vue进行开发
【4月更文挑战第24天】TypeScript是JavaScript超集,提供类型注解等特性,提升代码质量和可维护性。Vue.js是一款高效前端框架,两者结合优化开发体验。本文指导如何配置和使用TypeScript与Vue:安装TypeScript和Vue CLI,创建Vue项目时选择TypeScript支持,配置`tsconfig.json`,编写`.tsx`组件,最后运行和构建项目。这种结合有助于错误检查和提升开发效率。
|
10天前
|
JavaScript 编译器 开发者
TypeScript中的类型推断机制:原理与实践
【4月更文挑战第23天】TypeScript的类型推断简化编码,提高代码可读性。编译器基于变量初始值或上下文推断类型,若新值不兼容则报错。文章深入探讨了类型推断原理和实践,包括基本类型、数组、函数参数与返回值、对象类型的推断,并提醒注意类型推断的限制,如非万能、类型兼容性和适度显式指定类型。了解这些能帮助更好地使用TypeScript。
|
10天前
|
JavaScript 前端开发 编译器
TypeScript中的高级类型:联合类型、交叉类型与条件类型深入解析
【4月更文挑战第23天】探索TypeScript的高级类型。这些特性增强类型系统的灵活性,提升代码质量和维护性。
|
10天前
|
JavaScript 安全 编译器
TypeScript中类型断言的使用与风险
【4月更文挑战第23天】TypeScript中的类型断言用于显式指定值的类型,但在不恰当使用时可能引发运行时错误或降低代码可读性。
|
2月前
|
JavaScript 安全
TypeScript 中的高级类型转换技术:映射类型、条件类型和类型推断
TypeScript 中的高级类型转换技术:映射类型、条件类型和类型推断