TypeScript 泛型的使用

TypeScript 泛型的使用

泛型是指在定义函数、接口或类时，不预先指定具体的类型，而在使用时再指定类型的一种特性。它可以让我们写出更加灵活、通用的代码，并提高代码的复用性。

泛型函数

定义一个泛型函数的语法为：

function 函数名<T>(参数1: T, 参数2: T, ...): T {
  // 函数体
}

其中，函数名后面的 <T> 表示在函数体中可以使用 T 这个变量名来代表任意类型。

示例 1：

以下这个函数可以接收两个参数，并返回这两个参数组成的元组：

function makePair<T, U>(first: T, second: U): [T, U] {
  return [first, second];
}

使用：

console.log(makePair(1, "Hello"));      // [1, "Hello"]
console.log(makePair("World", true));  // ["World", true]

示例 2：

以下这个函数可以接收一个任意类型的数组，然后返回这个数组中所有元素的字符串表示形式：

function arrayToString<T>(arr: T[]): string {
  return arr.join(", ");
}

使用：

console.log(arrayToString([1, 2, 3]));             // "1, 2, 3"
console.log(arrayToString(["Hello", "World"]));    // "Hello, World"

泛型接口

定义一个泛型接口的语法为：

interface 接口名<T> {
  属性1: T,
  属性2: T,
  // ...
}

其中，接口名后面的 <T> 同样表示在接口中可以使用 T 这个变量名来代表任意类型。

示例：

以下这个接口描述了一个拥有 length 和 splice 两个属性的数组对象，并使用了泛型来表示数组中元素的类型：

interface MyArray<T> {
  length: number;
  splice(start: number, deleteCount?: number, ...items: T[]): T[];
}

使用：

let arr: MyArray<number> = {
  length: 0,
  splice(start: number, deleteCount: number, ...items: number[]): number[] {
    return [];
  }
};

泛型类

定义一个泛型类的语法为：

class 类名<T> {
  属性1: T;
  属性2: T;
  // ...
  constructor(参数1: T, 参数2: T, ...) {
    // 构造函数的内容
  }
}

同样地，类名后面的 <T> 表示在类中可以使用 T 这个变量名来代表任意类型。

示例：

以下这个类封装了一个泛型的栈结构：

class MyStack<T> {
  private items: T[] = [];

  push(item: T) {
    this.items.push(item);
  }

  pop(): T {
    return this.items.pop();
  }
}

使用：

let stack = new MyStack<number>();
stack.push(1);
stack.push(2);
console.log(stack.pop());    // 2
console.log(stack.pop());    // 1

以上就是 TypeScript 泛型的完整攻略，希望对你有所帮助。