理解 TypeScript 中的 infer 关键字

typescript 是 javascript 的静态类型超集，由于其能够及早捕获错误并提高代码可读性，在技术社区中广受欢迎。 typescript 的强大功能之一是 infer 关键字，它允许开发人员编写更具表现力和动态的类型。

推断关键字

typescript 2.8 中引入的 infer 关键字用于在条件类型中创建临时类型变量。然后，这些类型变量可用于推断条件类型的 true 或 false 分支内的类型。 infer 关键字使开发人员能够编写更具动态性和表现力的类型，因为它允许 typescript 根据使用的上下文确定特定类型。

为了更好地理解 infer 的工作原理，我们来看看条件类型的基本语法：

type myconditionaltype<t> = t extends sometype ? truetype : falsetype;
</t>

在此示例中，t 是泛型类型参数，sometype 表示与 t 进行比较的类型。如果 t 扩展 sometype，则 myconditionaltype 的类型将为 truetype。如果不是，它将是 falsetype。

现在，让我们将 infer 关键字引入其中：

type myinferredtype<t> = t extends sometype<infer u> ? u : falsetype;
</infer></t>

在这里，我们使用 infer 关键字在条件类型的 true 分支内创建一个临时类型变量 u。如果 t 扩展 sometype，typescript 将尝试根据 t 的类型推断 u 的类型。

示例

返回类型

returntype 是一种提取函数返回类型的实用程序类型。这是如何使用 infer 关键字创建动态类型的完美示例。这是 returntype 的定义：

type returntype<t extends any> any&gt; = t extends (...args: any[]) =&gt; infer r ? r : any;
</t>

在此定义中，t 是一个函数类型，它接受任意数量的参数并返回任意类型。使用 infer 关键字，我们创建一个临时类型变量 r 来表示函数的返回类型。如果 t 是函数，typescript 会推断返回类型并将其分配给 r。

让我们看看 returntype 的实际效果：

function greet(name: string): string {
  return `hello, ${name}!`;
}
​
type greetreturntype = returntype<typeof greet>; // greetreturntype is inferred as 'string'
</typeof>

这里，returntype用于推断greet函数的返回类型，即string。

参数

利用 infer 关键字的另一个有用的实用程序类型是参数。该类型将函数的参数类型提取为元组。参数定义如下：

type parameters<t extends any> any&gt; = t extends (...args: infer p) =&gt; any ? p : never;
</t>

在这个例子中，我们创建一个临时类型变量 p 来表示函数的参数类型。如果 t 是函数，typescript 会推断参数类型并将它们作为元组分配给 p。

让我们看一个使用参数的示例：

function add(a: number, b: number): number {
  return a + b;
}
​
type addparameters = parameters<typeof add>; // addparameters is inferred as [number, number]
</typeof>

这里的parameters用于推断add函数的参数类型，是一个元组[number, number]。

promisetype

promisetype 实用程序类型可用于提取 promise 解析为的类型。这在处理异步函数时特别有用。这是 promisetype 的定义：

type promisetype<t extends promise>&gt; = t extends promise<infer u> ? u : never;
</infer></t>

在此示例中，我们创建一个临时类型变量 u 来表示 promise 解析为的类型。如果 t 是 promise，typescript 会推断已解析的类型并将其分配给 u。这是一个示例：

async function fetchdata(): promise<string> {
  return "fetched data";
}
​
type fetcheddatatype = promisetype<returntype fetchdata>&gt;; // fetcheddatatype is inferred as 'string'
</returntype></string>

在本例中，promisetype 用于推断 fetchdata 函数的 promise 解析的类型，即字符串。

unboxarray

unboxarray 实用程序类型可用于提取数组中元素的类型。这是 unboxarray 的定义：

type unboxarray<t extends array>&gt; = t extends array<infer u> ? u : never;
</infer></t>

在此示例中，我们创建一个临时类型变量 u 来表示数组中元素的类型。如果 t 是一个数组，typescript 会推断元素类型并将其分配给 u。例如：

type MyArray = number[];

type ElementType = UnboxArray<myarray>; // ElementType is inferred as 'number'
</myarray>

这里，unboxarray 用于推断 myarray 类型内元素的类型，即 number。

局限性

虽然 infer 关键字非常强大，但它也有一些限制：

1. 它只能在条件类型中使用。

2. typescript 并不总是能够推断出正确的类型，尤其是在处理复杂或递归类型时。在这种情况下，开发人员可能需要提供额外的类型注释或重构其类型以帮助 typescript 推断正确的类型。

结论

通过理解和利用 infer 的力量，您可以创建更灵活的 typescript 项目。立即开始考虑将 infer 关键字合并到您的工具包中。

如果您发现这有帮助，请考虑 订阅我的时事通讯 以获取更多有关 web 开发的有用文章和工具。感谢您的阅读！