理解 TypeScript 中的 infer 关键字

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

推断关键字

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

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

type myconditionaltype = t extends sometype ? truetype : falsetype;

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

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

type myinferredtype = t extends sometype ? u : falsetype;

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

示例

返回类型

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

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

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

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

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

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

参数

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

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

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

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

衣购网站项目(三层开发)源码

商品查询功能提供了一个快速查看商品的途径。商品查询分为基本查询和高级查询。基本查询：提供关键字和商品大类两种条件的查询，用户可以只填写关键字或者选择商品大类或者关键字和商品大类都填写来查询商品。高级查询：提供关键字，商品大类，商品小类，商品价格范围四种条件的查询，用户可以任意填写其中一种或几种的查询条件来查询想要了解的商品信息。商品查询功能大大的方便了用户，提高了网站的用户体验。（5）帮助系统模块

下载

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

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

promisetype

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

type promisetype> = t extends promise ? u : never;

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

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

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

unboxarray

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

type unboxarray> = t extends array ? u : never;

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

type MyArray = number[];

type ElementType = UnboxArray; // ElementType is inferred as 'number'

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

局限性

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

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

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

结论

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

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