Typescript高级: 深入理解infer关键字

本文链接：https://blog.csdn.net/Tyro_java/article/details/139377890

概述

在 TS 中，infer 是一个高级类型操作，特别是条件类型和映射类型中非常有用的关键字
它在泛型中使用也会是一个强大工具，增强了类型推断的能力，让开发者更灵活地处理和操作类型
它允许在泛型类型推导过程中捕获一个具体的类型，这对于编写复杂的类型转换和映射操作特别有用
infer 的定义
- infer 表示在 extends 条件语句中以占位符出现的用来修饰数据类型的关键字
- 被修饰的数据类型等到使用时才能被推断出来
infer 占位符式的关键字出现的位置
- infer 出现在 extends 条件语句后的函数类型的参数类型位置上
- infer 出现在 extends 条件语句后的函数类型的返回值类型上
- infer 出现在类型的泛型具体化类型上

实现

1 ）infer 出现在 extends 条件语句后的函数类型的参数类型位置上

// 定义了一个接口Customer，它描述了一个具有name（字符串类型）和moneyPaid（数字类型）属性的对象
interface Customer {
  name: string
  moneyPaid: number
}

// 定义了一个函数类型，接受一个Customer类型的参数并返回一个字符串
type custFuncType = (cust: Customer) => string

// 定义了一个泛型类型inferType<T>，这是理解的重点。这是一个条件类型，它使用了infer关键字
type inferType<T> = T extends (params: infer P) => any ? P : T

// 定义了inferResultType类型别名，它是通过将前面定义的custFuncType类型作为参数传递给inferType得到的
type inferResultType = inferType<custFuncType>

分析一下这行代码：type inferType<T> = T extends (params: infer P) => any ? P : T
- T extends (params: infer P) => any
  - 这部分是一个类型测试，检查T是否可以赋值给一个函数类型
  - 该函数接受一个参数（我们称之为params）
  - infer P关键字在这里用于声明一个新的类型变量P，用来捕获T中函数参数的实际类型
- ? P
  - 如果上面的测试为真（即T确实是一个函数类型）
  - 那么整个条件类型的结果就是捕获的参数类型P
- : T
  - 如果上面的测试为假（即T不是函数类型或不匹配）
  - 则条件类型的结果就是T本身，不做任何改变
最后一行代码 type inferResultType = inferType<custFuncType>
- custFuncType是一个接受Customer类型参数的函数，所以infer P会捕获到这个参数类型
- 因此，inferResultType 实际上就是Customer类型

2 ) infer 出现在 extends 条件语句后的函数类型的返回值类型上

// 定义了一个接口Customer，它描述了一个具有name（字符串类型）和moneyPaid（数字类型）属性的对象
interface Customer {
    custname: string
    moneyPaid: number
}
// 这个类型定义了一个函数，该函数接受一个Customer类型的参数并返回一个字符串
type custFuncType = (cust: Customer) => string
type inferType<T> = T extends (params: any) => infer P ? P : T
type inferResultType = inferType<custFuncType>

核心在这里， type inferType<T> = T extends (params: any) => infer P ? P : T
- 上面，inferType 的 infer 在返回值的位置上
- infer P 表示“推断出一个类型 P”，这个 P 是函数的返回类型
- 它根据 extends 的检查结果来选择不同的类型
- 如果 T 是一个符合 (params: any) => … 形式的函数类型
- 那么表达式的结果是 P（即函数的返回类型）
- 否则，表达式的结果是 T 本身
最后，type inferResultType = inferType<custFuncType>
- 由于，custFuncType 是一个返回值为 string 的函数类型
- 符合，inferType 内部的三元推导的条件，因为返回值是 P, 而在这里P又是 string 类型
- 所以，type inferResultType 就是 string 类型

3 ） infer 出现在类型的泛型具体化类型上

class Subject {
    constructor(public id: number, public name: string) {}
}

const chineseSubject = new Subject(100, "语文");
const mathSubject = new Subject(101, "数学");

type ElementOfSet<T> = T extends Set<infer E> ? E : never;

const subjectsSet = new Set<Subject>([chineseSubject, mathSubject]);

type SubjectType = ElementOfSet<typeof subjectsSet>;

// 使用推断出的SubjectType类型
function printSubject(subject: SubjectType) {
    console.log(`学科ID: ${subject.id}, 学科名称: ${subject.name}`);
}

printSubject(chineseSubject);

核心代码在这里：type ElementOfSet<T> = T extends Set<infer E> ? E : never;
- 如果参数 T 属于 Set 类型，则 ElementOfSet 则是 E 的类型
- 这里 Set<infer E> 使用 infer E 推导出 E的类型，如果符合 extends 条件，则返回E，否则返回 never
const subjectsSet = new Set<Subject>([chineseSubject, mathSubject]);
- 这里 subjectsSet 是一个 Set 类型，而且单个元素是 Subject 类型
type SubjectType = ElementOfSet<typeof subjectsSet>;
- ElementOfSet<typeof subjectsSet> 这里符合内部条件，所以，它最终是一个 Subject 类型
所以，在最后，printSubject 中完美运行