通用的箭头函数（附实例）在这篇文章中，我们将介绍如何实现带有通用参数的箭头函数。这并不像我们想象的那样简单。一个例子

在这篇文章中，我们将介绍如何实现带有通用参数的箭头函数。这并不像我们想象的那样简单。

一个例子

考虑一下下面的通用箭头函数：

const firstOrNull = <T>(
  arr: T[]
): T | null =>
  arr.length === 0 ? null : arr[0];

这是一个强类型的函数，返回数组中的第一项，如果是空的，则返回null 。

不过这段代码是有问题的：

如果我们看一下转译后的代码，我们就会得到问题所在的线索：

角括号与JJSX元素混淆了!

为了解决这个错误，我们需要帮助转译过程将角括号视为通用参数。做到这一点的一个方法是添加一个约束条件：

const firstOrNull = <T extends unknown>(  arr: T[]
): T | null =>
  arr.length === 0 ? null : arr[0];

我们从unknown ，因为每个类型都可以分配给unknown 。也可以使用any ，但这并不是类型安全的。

另一个技巧是在通用参数后面加一个逗号：

const firstOrNull = <T,>(  arr: T[]
): T | null =>
  arr.length === 0 ? null : arr[0];

这是定义多个参数的语法，不会出错，即使我们没有定义两个参数。这足以让转译过程将角括号视为通用参数。

可以说，最简单的解决方案是使用正则函数，而不是箭头函数：

function firstOrNull<T>(arr: T[]): T | null {
  return arr.length === 0 ? null : arr[0];
}

它的效果很好，而且没有任何花样!