社区首页 >专栏 >TypeScript泛型

TypeScript泛型

原创

堕落飞鸟

发布于 2023-05-22 02:29:11

51000

代码可运行

文章被收录于专栏：飞鸟的专栏飞鸟的专栏

运行总次数：0

代码可运行

在 TypeScript 中，泛型（Generics）是一种用于创建可重用的组件的强大工具。泛型允许在函数、类和接口中使用类型参数，使得这些组件能够适应多种数据类型，提高代码的灵活性和可重用性。

泛型函数

泛型函数是一种可以接受不同类型参数的函数。通过使用尖括号 <T> 来定义类型参数，并在函数参数、返回值或函数体中使用类型参数，可以实现泛型函数的功能。

function identity<T>(value: T): T {
  return value;
}

let result1 = identity<string>("Hello");
let result2 = identity<number>(42);

console.log(result1); // 输出: "Hello"
console.log(result2); // 输出: 42

在上面的例子中，identity 函数使用了泛型类型参数 T。函数接受一个参数 value，类型为 T，并返回值也为 T。通过调用 identity 函数并显式指定类型参数，可以传递不同类型的值，得到相应类型的返回结果。

泛型类

泛型类是一种具有类型参数的类。通过在类名后面使用尖括号 <T> 来定义类型参数，并在类的属性、方法或构造函数中使用类型参数，可以创建可适用于多种类型的类。

class Container<T> {
  private value: T;

  constructor(value: T) {
    this.value = value;
  }

  getValue(): T {
    return this.value;
  }
}

let container1 = new Container<string>("Hello");
let container2 = new Container<number>(42);

console.log(container1.getValue()); // 输出: "Hello"
console.log(container2.getValue()); // 输出: 42

在上面的例子中，Container 类使用了泛型类型参数 T。类的构造函数接受一个参数 value，类型为 T，并将其赋值给私有属性 value。通过调用 getValue 方法，可以获取存储在容器中的值，其类型为 T。

泛型接口

泛型接口是一种具有类型参数的接口。通过在接口名后面使用尖括号 <T> 来定义类型参数，并在接口的属性或方法中使用类型参数，可以定义适用于多种类型的接口。

interface Printer<T> {
  print(value: T): void;
}

class ConsolePrinter<T> implements Printer<T> {
  print(value: T): void {
    console.log(value);
  }
}

let printer1: Printer<string> = new ConsolePrinter<string>();
let printer2: Printer<number> = new ConsolePrinter<number>();

printer1.print("Hello"); // 输出: "Hello"
printer2.print(42); // 输出: 42

在上面的例子中，我们定义了一个泛型接口 Printer<T>，其中包含一个 print 方法。然后，我们创建了一个实现了该接口的类 ConsolePrinter<T>，并在其 print 方法中使用 console.log 打印传入的值。通过声明类型为 Printer<string> 和 Printer<number> 的变量，我们可以分别创建适用于字符串和数字的打印器，并调用其 print 方法。

泛型约束

有时候我们希望泛型类型参数具有某些特定的属性或方法。为了达到这个目的，可以使用泛型约束（Generic Constraints）。

interface Lengthy {
  length: number;
}

function getLength<T extends Lengthy>(value: T): number {
  return value.length;
}

let length1 = getLength("Hello"); // 返回字符串的长度 5
let length2 = getLength([1, 2, 3, 4, 5]); // 返回数组的长度 5

在上面的例子中，我们定义了一个接口 Lengthy，该接口包含一个 length 属性。然后，我们定义了一个泛型函数 getLength，该函数接受一个泛型类型参数 T，并使用泛型约束 T extends Lengthy，表示 T 必须具有 Lengthy 接口中定义的属性。函数返回传入值的 length 属性。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

typescript