深入探討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的一個特殊類型，用於表示函數的返回值類型。它可以幫助我們更加方便地推導函數的返回值類型、創建更加類型安全的函數組合以及進行類型提示。然而，它也有一些局限性，不能用於無返回值的函數和非函數類型。