带你读《现代TypeScript高级教程》十一、泛型和类型体操(2)

简介: 带你读《现代TypeScript高级教程》十一、泛型和类型体操(2)

带你读《现代TypeScript高级教程》十一、泛型和类型体操(1)https://developer.aliyun.com/article/1348497?groupCode=tech_library


2 keyof 操作符和索引访问类型

keyof 操作符用于获取类型的所有属性名,结合索引访问类型可以从一个类型中获取属性的具体类型。

interface Person {
  name: string;
  age: number;}
type PersonKeys = keyof Person;  // "name" | "age"type PersonNameType = Person['name'];  // string

 

在上面的示例中,我们使用 keyof 操作符获取了 Person 接口的属性名集合,并通过索引访问类型获取了 Person 接口中 name 属性的类型。

3 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,并使用条件类型和 infer 关键字推断函数类型的返回类型。通过调用 ReturnType,我们推断出 add 函数的返回类型为 number

 

当涉及到泛型时,还有一些重要的概念和内置泛型函数可以深入分析。让我们继续探讨 extends 关键字、TS 官方内置的一些泛型函数以及它们的使用。

  1. extends 关键字和类型约束

在泛型中,我们可以使用 extends 关键字来对泛型类型进行约束。这样可以确保传递给泛型的类型满足特定条件。

 

function printProperty(obj: T): void {
  console.log(obj.name);}
printProperty({ name: 'John', age: 25 });  // 输出 'John'

在上面的示例中,printProperty 函数接受一个泛型参数 T,该参数必须满足一个约束条件:具有 name 属性,且 name 的类型为 string。通过使用 extends 关键字和类型约束,我们可以确保 obj 参数具有所需的属性和类型,从而避免出现错误。

  1. 泛型函数Util

TypeScript 提供了一些内置的泛型函数,这些函数被广泛用于处理各种类型操作。以下是一些常见的官方内置泛型函数:

a)Partial

Partial 是 TypeScript 中的一个内置泛型类型,它可以将给定类型 T 中的所有属性转换为可选属性。这对于创建部分完整的对象非常有用。

 

interface Person {
  name: string;
  age: number;}
type PartialPerson = Partial;
const partialPerson: PartialPerson = { name: 'John' };  // age 属性是可选的

 

在上面的示例中,PartialPerson 接口中的所有属性变为可选属性,从而创建了一个部分完整的 PartialPerson 类型。


带你读《现代TypeScript高级教程》十一、泛型和类型体操(3)https://developer.aliyun.com/article/1348495?groupCode=tech_library

相关文章
|
4月前
|
JavaScript 前端开发
揭秘 TypeScript 条件类型:超越简单类型检查
揭秘 TypeScript 条件类型:超越简单类型检查
|
4月前
|
JavaScript 安全 索引
TypeScript 高级类型工具:Partial, Required, Record 的妙用与陷阱
TypeScript 高级类型工具:Partial, Required, Record 的妙用与陷阱
|
4月前
|
JavaScript 安全 IDE
TypeScript 类型体操:别让 `any` 毁了你的安全网!
TypeScript 类型体操:别让 `any` 毁了你的安全网!
|
4月前
|
安全 JavaScript 编译器
TypeScript 泛型:解锁灵活且安全的代码重用
TypeScript 泛型:解锁灵活且安全的代码重用
|
4月前
|
JavaScript 安全 编译器
TypeScript 类型守卫:让你的类型系统更智能
TypeScript 类型守卫:让你的类型系统更智能
|
9月前
|
存储 安全 JavaScript
TypeScript-内置应用程序类型-Recode
通过使用 `Record` 类型,开发者可以显著提升代码的安全性和可维护性。无论是配置对象、字典结构还是动态表单,`Record` 类型都提供了一个简洁、类型安全的解决方案。
434 82
|
JavaScript 前端开发 安全
深入理解TypeScript:增强JavaScript的类型安全性
【10月更文挑战第8天】深入理解TypeScript:增强JavaScript的类型安全性
303 0
|
JavaScript 前端开发 开发者
深入理解TypeScript:类型系统与实用技巧
【10月更文挑战第8天】深入理解TypeScript:类型系统与实用技巧
|
JavaScript 前端开发 安全
使用 TypeScript 加强 React 组件的类型安全
【10月更文挑战第1天】使用 TypeScript 加强 React 组件的类型安全
307 106
|
设计模式 JavaScript 安全
TypeScript性能优化及代码质量提升的重要性、方法与策略,包括合理使用类型注解、减少类型断言、优化模块导入导出、遵循编码规范、加强代码注释等
本文深入探讨了TypeScript性能优化及代码质量提升的重要性、方法与策略,包括合理使用类型注解、减少类型断言、优化模块导入导出、遵循编码规范、加强代码注释等,旨在帮助开发者在保证代码质量的同时,实现高效的性能优化,提升用户体验和项目稳定性。
372 6