TypeScript中泛型写在函数类型左右两侧的区别是什么？

两者的核心区别是泛型参数的绑定时机不同：

• type A<T>是泛型类型，泛型参数在你声明对应类型的变量时就必须确定
• type B是普通类型，描述的是泛型函数，泛型参数在你实际调用函数时才会确定

1. type A<T> = (x: T) => T 详解 #

A本身不是可直接使用的完整类型，它是「类型工厂」：你需要先给泛型参数T传入具体类型，才能得到一个确定的函数类型。

// 声明变量时必须先指定T的具体类型，这里指定为string，得到「接收string返回string」的函数类型
const fnA1: A<string> = (x) => x;
fnA1("测试"); // 合法
fnA1(123); // 类型报错，参数必须是string类型

// 也可以指定T为number，得到完全独立的另一个函数类型
const fnA2: A<number> = (x) => x;
fnA2(456); // 合法
fnA2("测试"); // 类型报错

2. type B = <T>(x: T) => T 详解 #

B本身就是完整的可用类型，它描述的是「自带泛型参数的函数」，泛型参数不需要提前绑定，调用时会根据传入的参数自动推导类型。

const fnB: B = (x) => x;
// 调用函数时才确定T的具体类型
fnB("测试"); // 此时T为string，返回值也是string类型
fnB(123); // 此时T为number，返回值也是number类型
fnB(true); // 此时T为boolean，返回值也是boolean类型

场景对比示例 #

// 接收A类型作为参数时，必须提前指定T的类型，函数内部只能传入对应类型的值
function handlerA(fn: A<string>) {
  fn("合法参数");
  fn(123); // 类型报错
}

// 接收B类型作为参数时，不需要指定T的类型，函数内部可以传入任意类型的值
function handlerB(fn: B) {
  fn("合法参数");
  fn(123);
  fn(true);
}

内容的提问来源于stack exchange，提问作者f.g.