TypeScript泛型两种写法差异：为何第一种报错第二种正常？

两种写法示例 #

第一种写法（报错） #

function add<T extends string|number>(a1:T,a2:T) :T{
  return a1+a2
}
add<number>(1,3)

报错信息：Operator '+' cannot be applied to types 'T' and 'T'

第二种写法（无报错） #

type addType<T extends string | number> = (a1:T,a2:T)=>T
const add1:addType<string> = (a1,a2)=>{
  return a1+a2
}
add1('1','2')
const add2:addType<number> = (a1,a2)=>{
  return a1+a2
}
add2(3,4)

差异及报错原因 #

核心差异 #

第一种是泛型函数，泛型约束直接作用在函数本身，TypeScript需要在函数内部对泛型类型T的操作做合法性校验；第二种是泛型类型别名，先定义泛型函数类型，再将具体函数实现赋值给已具体化的类型（比如addType<string>）。

第一种写法报错的原因 #

TypeScript的泛型检查会覆盖约束的所有可能类型，哪怕调用时指定了add<number>，函数内部的T依然属于string | number联合类型。虽然+对string和number各自都有效，但TypeScript不允许直接对联合类型执行+操作——它无法确定当前T具体是哪种类型，不会默认推导“两个参数同属单一子类型”这种逻辑。

第二种写法正常的原因 #

当指定addType<string>或addType<number>时，泛型T已经被具体化为单一类型（要么string，要么number）。此时赋值的函数内部，a1和a2的类型明确，+操作符对单一的string或number都合法，因此不会报错。

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