深入探讨TypeScript的ReturnType

一、ReturnType概述

ReturnType是TypeScript的一个特殊类型，表示函数的返回值类型。这个类型的本质是一个类型查询，它接受一个函数类型作为参数，返回函数的返回值类型。

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

function test(): string {
  return "test"
}

type TestReturnType = MyReturnType<typeof test>;
// 类型为string

上述代码中，我们先定义了一个MyReturnType类型，这个类型接受一个函数类型作为参数，并返回该函数的返回值类型。然后我们定义一个test函数，并将它的类型传到MyReturnType中，得到了它的返回值类型，这里是string。

二、ReturnType使用示例

1、类型推导

ReturnType可以帮助我们推导出函数的返回值类型。在下面的例子中，我们定义了一个add函数，它接受两个数字参数并返回它们的和，我们可以使用ReturnType类型查询来判断它的返回值类型：

function add(a: number, b: number): number {
  return a + b;
}

type AddReturnType = ReturnType<typeof add>;
// 类型为number

我们使用ReturnType类型查询获取了add函数的返回值类型并赋值给AddReturnType，它的类型是number。

2、更加类型安全的函数组合

使用ReturnType类型查询，我们可以创建更加安全的函数组合。在下面的例子中，我们定义了三个函数：add、multiply和evaluate。其中，add函数将两个数字相加，multiply函数将两个数字相乘，evaluate函数将两个函数作为参数，返回它们的执行结果。

function add(a: number, b: number): number {
  return a + b;
}

function multiply(a: number, b: number): number {
  return a * b;
}

function evaluate(func1: () => number, func2: () => number): number {
  return func1() + func2();
}

const result = evaluate(add, multiply);
// 类型错误：add函数和multiply函数的返回类型不匹配

在上面的代码中，我们通过evaluate函数将add函数和multiply函数组合起来，并将结果赋值给result变量。然而，这种写法是存在风险的，因为add函数和multiply函数的返回值类型不匹配，可能导致意料之外的结果。我们可以使用ReturnType类型查询解决这个问题：

function add(a: number, b: number): number {
  return a + b;
}

function multiply(a: number, b: number): number {
  return a * b;
}

function evaluate(func1: () => ReturnType<typeof add>, func2: () => ReturnType<typeof multiply>): number {
  return func1() + func2();
}

const result = evaluate(add, multiply);
// 类型为number

在上面的代码中，我们修改了evaluate函数的参数类型，使用ReturnType类型查询分别获取了add函数和multiply函数的返回值类型作为参数类型。这样，我们就可以确保add函数和multiply函数的返回值类型匹配了。

3、使用ReturnType进行类型提示

ReturnType还可以帮助我们进行类型提示，让代码更加易读。在下面的例子中，我们定义了一个函数formatName，它接受一个名字和一个姓氏，返回一个字符串格式化后的全名。

function formatName(firstName: string, lastName: string): string {
  return `${firstName} ${lastName}`;
}

type NameFormatter = (firstName: string, lastName: string) => ReturnType<typeof formatName>;

const nameFormatter: NameFormatter = (firstName, lastName) => {
  return formatName(firstName, lastName);
};

我们使用ReturnType获取了formatName函数的返回值类型，并将其作为NameFormatter类型的返回值类型，这样在定义nameFormatter函数时可以直接使用ReturnType进行类型提示，让代码更加清晰易懂。

三、ReturnType的局限性

ReturnType在大多数情况下都是非常有用的，但是它也有一些局限性。在下面的例子中，我们定义了一个返回undefined的函数，在使用ReturnType查询它时，得到了any类型：

function noop(): void {
  return undefined;
}

type NoopReturnType = ReturnType<typeof noop>;
// 类型为any

在上面的代码中，我们定义了一个noop函数，它仅返回undefined。然而，我们使用ReturnType查询它的返回值类型时，得到了any类型而非void。这是因为在TypeScript中，void类型本质上是一个没有值的类型，而any类型则代表任何类型。因此，ReturnType会把无返回值的函数（void）看作返回any类型。

另外一个问题是，ReturnType只能用于函数类型。这意味着它无法用于泛型类型或其他非函数类型。

总结

ReturnType是TypeScript的一个特殊类型，用于表示函数的返回值类型。它可以帮助我们更加方便地推导函数的返回值类型、创建更加类型安全的函数组合以及进行类型提示。然而，它也有一些局限性，不能用于无返回值的函数和非函数类型。