当前位置：首页 > article >正文

【TS】TypeScript内置条件类型-ReturnType

article 2024/11/19 13:37:31

ReturnType

在TypeScript中，ReturnType 是一个内置的条件类型（Conditional Type），它用于获取一个函数返回值的类型。这个工具类型非常有用，特别是当你需要引用某个函数的返回类型，但又不想直接写出那个具体的类型时。

ReturnType 的基本语法如下：

type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;

例如，如果你有一个函数createApp，它是Vue 3中用于创建Vue应用实例的函数，你可以这样使用ReturnType来获取它的返回类型：

import { createApp } from 'vue';  
  
// 假设App是一个Vue组件  
import App from './App.vue';  
  
// 使用ReturnType获取createApp的返回类型  
type VueApp = ReturnType<typeof createApp>;  
  
const app: VueApp = createApp(App);  
  
// 现在app的类型是VueApp，它实际上是createApp函数的返回类型  
// 在Vue 3中，这通常是一个具有mount、component、directive等方法的对象  
  
// 如果你有一个函数需要接受这样的Vue应用实例作为参数  
function useApp(appInstance: VueApp) {  
  // ...  
}  
  
// 你可以安全地将app传递给这个函数  
useApp(app);

注意，ReturnType 只能用于函数类型。如果你尝试将它用于非函数类型，TypeScript会报错。createApp是Vue库的一部分，并且Vue库是用TypeScript编写的，所以ReturnType能够准确地推断出Vue应用实例的类型。

了解释这个类型定义，我们可以将其分解为几个部分：

泛型约束：T extends (…args: any[]) => any
这部分定义了一个泛型T，它必须是一个函数类型。这个函数类型可以接受任意数量和类型的参数（由(…args: any[])表示），并返回任意类型的值（由=> any表示）。这是ReturnType能够工作的前提，即它只能用于函数类型。
条件类型：T extends (…args: any[]) => infer R ? R : any
条件类型允许TypeScript根据某个条件来解析类型。在这个例子中，条件是T（一个函数类型）是否可以被视为一个具有特定签名（即接受任意参数并返回某个值的函数）的类型。如果T满足这个条件（实际上，由于泛型约束，它总是满足的），那么TypeScript将使用infer关键字来推断出函数的返回类型，并将其赋值给R。然后，条件类型的“真”分支（即?后面的部分）就是R，即函数的返回类型。

如果T不满足条件（但实际上由于泛型约束，这种情况不会发生），则条件类型的“假”分支（即:后面的部分）将被使用，这里是any。但在ReturnType的定义中，由于有泛型约束，所以“假”分支实际上永远不会被执行。

类型别名：type ReturnType<…> = …
最后，整个表达式被定义为一个类型别名ReturnType，它接受一个泛型参数T，并返回该函数的返回类型。

在TypeScript中，infer R表示在条件类型（conditional types）中引入的一个待推断的类型变量。这个变量R用于在条件类型的真实分支中引用，以推断出待推断的类型。infer是TypeScript 2.8及以后版本中引入的一个关键字，它允许在条件类型中进行类型推导，从而实现更灵活和可复用的类型定义。

具体来说，当在extends子句中使用infer时，infer R（其中R可以是任意标识符）用于从满足某个条件的类型中推断出具体的类型。

查看全文

http://www.kler.cn/a/325196.html