TypeScript中箭头函数泛型写在类型声明前后的区别是什么

两者的本质差异是泛型参数的绑定时机不同，对应适用场景完全不同：

第一种写法：泛型参数绑定到函数 #

export type Sort = <D>(r: Rows<D>, f: Field<D>, o: Order) => Rows<D>;

这种写法里<D>写在函数签名前面，泛型参数D属于函数本身，只有当函数被调用时才会确定具体类型。
你声明符合Sort类型的函数时不需要提前指定D的类型，同一个函数实例可以支持处理任意符合规则的D类型入参：

// 声明时无需指定D类型
const commonSort: Sort = (rows, field, order) => { /* 排序逻辑 */ }
// 调用时自动推导D为User类型
commonSort(userRows, userField, 'asc')
// 也可以显式指定D为Product类型调用
commonSort<Product>(productRows, productField, 'desc')

第二种写法：泛型参数绑定到类型别名 #

export type Sort<D> = (r: Rows<D>, f: Field<D>, o: Order) => Rows<D>;

这种写法里<D>写在类型别名Sort后面，泛型参数D属于类型别名本身，你在使用Sort类型声明变量时就必须提前固定D的具体类型。
声明后的函数只能处理固定D类型的入参，传其他类型会直接报错：

// 声明时就固定D为User类型
const userSort: Sort<User> = (rows, field, order) => { /* 排序逻辑 */ }
// 只能传入User相关的参数
userSort(userRows, userField, 'asc')
// 传入Product类型参数会直接类型报错，因为userSort的D已经被固定为User
userSort(productRows, productField, 'desc')

适用场景总结 #

• 需要同一个函数实例支持多种数据类型的排序，选第一种写法
• 需要每个函数实例仅处理单一固定数据类型的排序，选第二种写法

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