TypeScript两种泛型函数类型定义的差异及相关技术疑问

一、两种语法的官方名称 #

• type FooFn<Bar> = (bar: Bar) => any：泛型类型别名，泛型参数<Bar>属于整个类型别名，使用时必须先给FooFn指定具体的Bar类型，才能得到一个确定的函数类型。
• type FooFn = <Bar>(bar: Bar) => any：泛型函数类型，泛型参数<Bar>属于函数本身，这个类型直接代表一类“可以处理任意类型参数Bar的函数”，使用时无需提前指定Bar。

二、何时优先使用泛型函数类型（后者） #

• 通用工具函数场景：当你需要一个能适配多种参数类型的函数，且希望每次调用时自动推导类型时。比如通用的格式化、转换函数，用后者的话，调用format(123)会自动推断Bar为number，format('text')自动推断为string，无需提前给类型别名指定类型。
• 函数作为参数传递时：比如回调函数、高阶函数场景，直接用泛型函数类型定义参数更简洁。例如：

  function runCallback(fn: <T>(arg: T) => void) {
    fn('hello');
    fn(42);
  }
  

  这里fn可以接受任意类型的参数，无需提前绑定泛型参数。
• 避免重复指定类型：如果用前者，每次声明函数变量都要写const fn: FooFn<number> = (bar) => {...}，而后者只需const fn: FooFn = (bar) => {...}，后续调用自动适配类型。

三、确保类型推导正确的技巧 #

• 优先依赖自动推导：除非自动推导失败，否则不要手动指定泛型参数。比如调用泛型函数时，传入具体值，TypeScript会根据参数类型自动推断Bar：

  type FooFn = <Bar>(bar: Bar) => Bar;
  const identity: FooFn = (bar) => bar;
  const num = identity(123); // num自动推断为number
  const str = identity('test'); // str自动推断为string
  

• 明确返回值与泛型的关联：不要用any作为返回值，尽量让返回值类型依赖泛型参数，比如=> Bar而非=> any，这样TypeScript的推导逻辑更清晰，能准确关联输入输出类型。
• 添加泛型约束缩小范围：如果希望泛型参数只在特定类型范围内推导，可以用extends添加约束，避免过于宽泛的推断：

  type FooFn = <Bar extends string | number>(bar: Bar) => Bar;
  // 传入boolean会报错，符合预期
  identity(true); // 类型错误：boolean不满足string | number约束
  

• 测试边界用例：传入null、undefined、联合类型等边界值，检查TypeScript是否能正确推断泛型类型，确保函数的类型行为符合预期。

内容的提问来源于stack exchange，提问作者PatrykB