TypeScript 泛型

在 TypeScript 中使用类型时，我们假设我们知道要使用的类型是什么。

例如，要定义以下日志函数：

const logAndReturn = (input: string): string => {
  console.log(input);
  return input;
};

在这个简单的函数中，我们期望传入一个字符串，返回一个字符串，仅此而已。
但为什么它只能处理字符串呢？
如果我们尝试传入一个问号呢number？

嗯，这有点傻。我们不能把数字传递给这个函数。
这完全说得通。

解决此问题的一种可能方法是使用any作为类型。

const logAndReturn = (input: any): any => {
  console.log(input);
  return input;
};

但这样做会导致无法从外部识别类型。
这基本上就相当于你根本没用 TypeScript。

所谓“外部使用”，是指无论我们在哪里调用这个函数，你都应该能看到它被强制转换为什么类型，就像这样：

那么接下来呢？

TypeScript 泛型

这正是泛型类型发挥作用的地方。它们可以用来标识被调用的特定函数的类型。

使函数本身无需知道它正在处理哪种类型。

要识别泛型类型，必须在函数前加上泛型变量，<Type>其中Type是泛型变量。

注：我们通常用T它来表示通用类型。但是，它并不局限于任何特定名称。

让我们把上面的函数改写成一个通用的类型化函数。

const logAndReturn = <T>(input: T): T => {
  console.log(input);
  return input;
};

现在，如果我们想使用这个函数并传递一个字符串，我们可以这样做：

logAndReturn<string>('a string');

经查阅，报告内容如下：

如果我们想将其转换为我们的数字，我们可以更改所使用的通用类型。

logAndReturn<number>(123);

如您所见，这非常强大，因为我们不需要预先知道类型，但可以保持对正确类型的引用。

这种方法并不局限于这些现有类型。我们甚至可以定义一个自定义接口来使用。

interface User {
  firstname: string;
  lastname: string;
}

logAndReturn<User>({firstname: 'Chris', lastname: 'Bongers'});

在这种情况下，我们的函数将需要指定User类型。

结论

希望您对泛型类型及其用法有了初步的了解。
在接下来的文章中，我将深入探讨具体的用例，以便更全面地理解它们。

感谢阅读，让我们保持联系！

感谢您阅读我的博客。欢迎订阅我的电子邮件简讯，也可以在Facebook或Twitter上关注我。