本文主要是介绍Typescript高级: 深入理解infer关键字,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
概述
- 在 TS 中,infer 是一个高级类型操作,特别是条件类型和映射类型中非常有用的关键字
- 它在泛型中使用也会是一个强大工具,增强了类型推断的能力,让开发者更灵活地处理和操作类型
- 它允许在泛型类型推导过程中捕获一个具体的类型,这对于编写复杂的类型转换和映射操作特别有用
- infer 的定义
- infer 表示在 extends 条件语句中以占位符出现的用来修饰数据类型的关键字
- 被修饰的数据类型等到使用时才能被推断出来
- infer 占位符式的关键字出现的位置
- infer 出现在 extends 条件语句后的函数类型的参数类型位置上
- infer 出现在 extends 条件语句后的函数类型的返回值类型上
- infer 出现在类型的泛型具体化类型上
实现
1 )infer 出现在 extends 条件语句后的函数类型的参数类型位置上
// 定义了一个接口Customer,它描述了一个具有name(字符串类型)和moneyPaid(数字类型)属性的对象
interface Customer {name: stringmoneyPaid: 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: stringmoneyPaid: 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
中完美运行
总结
- infer关键字在TypeScript中为泛型编程提供了一个强大的工具
- 它不仅增强了类型系统的表达能力,还使开发者能够编写出更加灵活和精确的类型定义
- 通过掌握infer的使用,你能够在处理复杂类型逻辑和类型转换时更加游刃有余
- 提升代码的类型安全性和可维护性
这篇关于Typescript高级: 深入理解infer关键字的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!