面试官问到 TypeScript:详解 returnType 方法

299 阅读2分钟

在TypeScript中,ReturnType是一个高级类型工具,它用于获取一个函数返回值的类型。这个工具特别有用,在你需要根据函数的返回类型来定义另一个类型或变量时。ReturnType接受一个函数类型作为参数,并返回该函数返回值的类型。

基本语法

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

这里,T是一个泛型参数,它约束为任何函数类型(即任何接受任意参数列表并返回任意值的函数)。infer R是TypeScript的条件类型(Conditional Types)和类型推断(Type Inference)的一个特性,它用于从给定的类型中“推断”出一个新的类型R,这里的R就是函数的返回类型。

示例

假设我们有一个函数,它接收一个字符串并返回一个该字符串的大写版本:

function toUpperCase(str: string): string {  
  return str.toUpperCase();  
}

如果我们想要基于toUpperCase函数的返回类型来定义一个类型,我们可以这样做:

type UpperCaseReturnType = ReturnType<typeof toUpperCase>;  
  
// 现在UpperCaseReturnType就是string类型  
const result: UpperCaseReturnType = "hello".toUpperCase(); // 正确  
const wrongResult: UpperCaseReturnType = 123; // 错误,因为123不是string类型

在这个例子中,ReturnType<typeof toUpperCase>被用来获取toUpperCase函数的返回类型,并将其存储在UpperCaseReturnType类型中。这样,UpperCaseReturnType就等于string类型,我们可以使用这个类型来定义变量或参数,确保它们的类型与toUpperCase函数的返回类型一致。

使用场景

  • 类型映射:在创建类型映射时,你可能需要根据一个函数的返回类型来定义另一个类型。
  • 类型兼容性:确保你的变量或参数类型与某个函数的返回类型兼容。
  • 高阶函数:在高阶函数(接受函数作为参数或返回函数的函数)中,ReturnType可以用来推断或约束参数函数或返回函数的返回类型。

ReturnType是TypeScript类型系统中一个非常有用的工具,它增强了类型安全性和灵活性,特别是在处理复杂或动态的类型关系时。