TypeScript中两类泛型函数类型的差异及泛型G访问方法咨询

一、核心差异 #

• First<G>：泛型类型的函数
  这是一个带泛型参数的类型别名，泛型属于类型本身。使用它定义变量时必须显式指定G的类型，一旦指定，该变量对应的函数就被固定为接收和返回G类型的逻辑，无法再适配其他类型：

  const strFn: First<string> = (arg) => arg;
  strFn(123); // 类型报错，只能接收string
  

• Second：泛型函数的类型
  这是一个本身为泛型函数的类型别名，泛型属于函数本身。定义变量时无需指定G，函数会根据每次调用的参数自动推断G的类型，同一个变量可以处理不同类型的输入输出：

  const universalFn: Second = (arg) => arg;
  universalFn("test"); // G被推断为string
  universalFn(456); // G被推断为number
  

二、明确命名与检索关键词 #

• First<G>：可称为**「泛型类型函数」或「参数化类型函数」**，检索关键词：TypeScript generic type function、TypeScript parameterized function type
• Second：可称为**「泛型函数类型」或「函数级泛型类型」**，检索关键词：TypeScript generic function type、TypeScript function-level generic

三、各自优缺点 #

First<G> 的优缺点 #

• 优点：
  • 类型约束严格，一旦指定G，函数的输入输出类型完全固定，避免意外类型错误
  • 定义阶段就明确适用场景，代码可读性强
• 缺点：
  • 灵活性差，一个变量只能处理单一类型，无法复用
  • 必须显式指定泛型参数，代码冗余

Second 的优缺点 #

• 优点：
  • 复用性极强，同一个变量可适配任意符合逻辑的类型
  • 调用时自动推断泛型，代码简洁
• 缺点：
  • 函数实现内部无法直接访问泛型G（即你遇到的问题），因为G是调用时才确定的，定义阶段不在当前作用域
  • 类型约束宽松，若函数内部有依赖G的逻辑，难以做静态类型校验

四、在Second类型函数中访问泛型G的方法 #

虽然不依赖类型断言是最佳实践，但有两种方式可实现需求：

1. 给函数实现显式声明泛型 #

直接在函数定义上添加泛型参数，与类型别名的泛型形成呼应，此时G会进入函数内部作用域：

const myFunction: Second = <G>(arg: G) => {
  let someValue = getExternalValue();
  return someValue as G; // 可正常访问G
};

2. 通过参数类型反向推断G #

借助typeof arg获取参数的类型，以此替代泛型G：

const myFunction: Second = (arg) => {
  type G = typeof arg;
  let someValue = getExternalValue();
  return someValue as G;
};

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