作者：@Simohamed Marhraoui
原文：https://blog.logrocket.com/understanding-infer-typescript/
背景
TypeScript 是一种静态类型检查的编程语言，广泛用于前端和后端开发。随着 TypeScript 的不断发展，其类型系统变得越来越复杂和强大。最近，TypeScript 引入了一个新的关键字 infer，它允许开发者在类型推断中动态地捕获和使用类型。本文详细介绍了 infer 的使用场景、工作原理以及对 TypeScript 类型系统的影响。
【早阅】改掉10个不好的TypeScript习惯
要点
infer 关键字的主要用途是在条件类型中动态地捕获和使用类型。通过 infer，开发者可以更灵活地处理复杂的类型操作，例如从函数参数、数组、元组和联合类型中提取类型。
分析
基本用法
infer 通常与条件类型结合使用，例如
T extends (...args: any[]) => infer R ? R : any
这里的 infer R 表示在满足条件时捕获函数的返回类型。
一个简单的例子是
type ExtractStringType<T> = T extends `${infer U}` ? U : never;
它可以从字符串类型中提取实际的字符串类型。
从联合类型中提取类型
infer 在处理联合类型时非常有用。例如，
type ExtractNumberType<T> = T extends `${infer U}` ? `${U}` extends `${number}` ? U : never : never;
可以从联合类型中提取数字类型。
从数组和元组中提取类型
infer 可以用于从数组和元组中提取元素类型。例如，
type ExtractArrayElementType<T extends readonly any[]> = T extends readonly (infer U)[] ? U : never;
可以从数组类型中提取元素类型。
还可以用于递归地展平嵌套数组，例如
Flatten<T> = T extends Array<infer U> ? Flatten<U> : T;
在 React 中的应用
在 React 中，infer 可以用于提取组件的 prop 类型。例如，
type ComponentProps<
T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>
> = T extends JSXElementConstructor<infer P>
? P
: T extends keyof JSX.IntrinsicElements
? JSX.IntrinsicElements[T]
: {}
在泛型函数中的应用
infer 可以用于从函数参数和返回值中推断类型。例如，
function getFirst<T extends unknown[]>(arr: T): T extends [infer U, ...unknown[]] ? U : never {
return arr[0] as T extends [infer U, ...unknown[]] ? U : never;
}
const firstNumber = getFirst([1, 2, 3]); // firstNumber is inferred as number
const firstString = getFirst(['a', 'b', 'c']); // firstString is inferred as string
可以从数组中提取第一个元素的类型。
影响
infer 的引入极大地增强了 TypeScript 的类型系统，使得开发者能够更灵活地处理复杂的类型操作。它不仅简化了代码，还提高了代码的可读性和可维护性。此外，infer 的使用使得 TypeScript 能够更好地与第三方库集成，自动推断和处理复杂的类型定义。
结论
infer 是 TypeScript 类型系统中的一个强大工具，它允许开发者在类型推断中动态地捕获和使用类型。通过 infer，开发者可以更灵活地处理复杂的类型操作，例如从函数参数、数组、元组和联合类型中提取类型。随着 TypeScript 的不断发展，infer 将成为开发者工具箱中的一个重要组成部分，帮助开发者编写更安全、更高效的代码。未来，随着 TypeScript 类型系统的进一步完善，infer 的应用场景将会更加广泛，为开发者提供更多的可能性。
AI 阅：了解技术资讯的一种方式。
