TypeScript基础（五）泛型

? 专栏介绍

TypeScript是一种由微软开发的开源编程语言，它是JavaScript的超集，意味着任何有效的JavaScript代码都是有效的TypeScript代码。TypeScript通过添加静态类型和其他特性来增强JavaScript，使其更适合大型项目和团队开发。

在TypeScript专栏中，我们将深入探讨TypeScript的各个方面，包括语法、类型系统、模块化、面向对象编程等。我们将介绍如何使用TypeScript来构建可维护、可扩展和高效的应用程序。

TypeScript是一种开源的编程语言，它是JavaScript的超集，意味着所有的JavaScript代码都可以在TypeScript中运行。TypeScript添加了静态类型检查和其他一些新特性，以提高代码的可读性、可维护性和可扩展性。

---

引言

在编程中，我们经常会遇到需要处理不同类型数据的情况。为了提高代码的复用性和灵活性，TypeScript引入了泛型的概念。泛型可以让我们在定义函数、类或接口时，不预先指定具体的类型，而是在使用时再指定类型。本文将详细介绍TypeScript中泛型的使用方法和技巧。

概念

泛型是一种参数化类型的方式，它可以用来创建可重用的组件。通过使用泛型，我们可以在定义函数、类或接口时不预先指定具体的类型，而是在使用时再指定类型。这样可以增加代码的灵活性和复用性。

泛型的使用

在函数、类型别名、接口和类中使用泛型可以增加代码的灵活性和重用性。下面详细介绍如何在这些场景中使用泛型，并提供相应的示例。

1. 函数中使用泛型

函数可以使用泛型来接收不同类型的参数，并返回相应的结果。可以通过在函数名后面使用尖括号（<>）来定义泛型参数，并在函数体内使用该参数。

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

let result = identity<string>("Hello");
console.log(result);  // 输出：Hello

let result2 = identity<number>(123);
console.log(result2);  // 输出：123

2. 类型别名中使用泛型

类型别名可以用来定义复杂的类型，包括泛型类型。可以通过在类型别名后面使用尖括号（<>）来定义泛型参数，并在类型定义中使用该参数。

type Pair<T> = {
  first: T;
  second: T;
};

let pair: Pair<number> = { first: 1, second: 2 };
console.log(pair);  // 输出：{ first: 1, second: 2 }

let pair2: Pair<string> = { first: "hello", second: "world" };
console.log(pair2);  // 输出：{ first: 'hello', second: 'world' }

3. 接口中使用泛型

接口可以使用泛型来定义灵活的类型。可以通过在接口名后面使用尖括号（<>）来定义泛型参数，并在接口定义中使用该参数。

interface Box<T> {
  value: T;
}

let box: Box<number> = { value: 123 };
console.log(box);  // 输出：{ value: 123 }

let box2: Box<string> = { value: "hello" };
console.log(box2);  // 输出：{ value: 'hello' }

4. 类中使用泛型

类可以使用泛型来定义灵活的属性和方法。可以通过在类名后面使用尖括号（<>）来定义泛型参数，并在类定义中使用该参数。

class Queue<T> {
  private elements: T[] = [];

  enqueue(element: T): void {
    this.elements.push(element);
  }

  dequeue(): T | undefined {
    return this.elements.shift();
  }

  isEmpty(): boolean {
    return this.elements.length === 0;
  }

  size(): number {
    return this.elements.length;
  }
}

let queue = new Queue<number>();

queue.enqueue(1);
queue.enqueue(2);

console.log(queue.dequeue());  // 输出：1
console.log(queue.size());  // 输出：1

泛型约束与多泛型

泛型约束和多泛型是在使用泛型时的一些高级技巧，可以进一步限制泛型的类型范围和增加灵活性。下面详细介绍泛型约束和多泛型，并提供相应的示例说明。

1. 泛型约束

泛型约束可以限制泛型参数必须满足某些条件，例如必须是某个基类的子类、必须实现某个接口等。可以使用 extends 关键字来定义泛型约束。

interface Lengthwise {
  length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length);
  return arg;
}

loggingIdentity("hello"); // 输出：5
loggingIdentity([1, 2, 3]); // 输出：3
loggingIdentity({ length: 10, value: 3 }); // 输出：10

2. 多泛型

可以同时定义多个泛型参数，用逗号分隔。多个泛型参数可以相互之间有关联，也可以完全独立。

function merge<T, U>(obj1: T, obj2: U): T & U {
  return { ...obj1, ...obj2 };
}

let mergedObj = merge({ name: "John" }, { age: 30 });

console.log(mergedObj.name); // 输出：John
console.log(mergedObj.age); // 输出：30

在上面的示例中，merge 函数接收两个参数，一个是类型为 T 的对象 obj1，另一个是类型为 U 的对象 obj2。函数返回的类型是 T & U，表示返回的对象同时具有 T 和 U 类型的属性。

需要注意以下几点：

• 泛型约束使用 extends 关键字来定义，可以约束泛型参数必须满足某些条件。

• 泛型约束可以应用于泛型函数、泛型类和泛型接口。

• 多个泛型参数可以相互之间有关联，也可以完全独立。

• 在使用多泛型时，需要注意传入的参数类型和返回值类型要与泛型参数相匹配，否则可能会导致编译错误或运行时错误。

示例

开发一个字典类（Dictionary），字典中会保存键值对的数据

键值对数据的特点：

• 键（key）可以是任何类型，但不允许重复
• 值（value）可以是任何类型
• 每个键对应一个值
• 所有的键类型相同，所有的值类型相同

export type CallBack<T, U> = (key: T, val: U) => void

export class Dictionary<K, V> {
  private keys: K[] = []
  private values: V[] = []

  get size() {
    return this.keys.length
  }

  set(key: K, val: V) {
    const i = this.keys.indexOf(key)
    if (i < 0) {
      this.keys.push(key)
      this.values.push(val)
    } else {
      this.values[i] = val
    }
  }

  forEach(callback: CallBack<K, V>) {
    this.keys.forEach((k, i) => {
      const v = this.values[i]
      callback(k, v)
    })
  }

  has(key: K) {
    return this.keys.includes(key)
  }

  delete(key: K) {
    const i = this.keys.indexOf(key)
    if (i === -1) {
      return
    }
    this.keys.splice(i, 1)
    this.values.splice(i, 1)
  }
}

这个泛型类和泛型类型别名可以实现一个通用的字典数据结构。可以根据需要传入不同类型的键和值来创建字典对象，并使用提供的方法进行操作。例如：

const dict = new Dictionary<string, number>();

dict.set("one", 1);
dict.set("two", 2);
dict.set("three", 3);

console.log(dict.size); // 输出：3

dict.forEach((key, value) => {
  console.log(key, value);
});
// 输出：
// one 1
// two 2
// three 3

console.log(dict.has("two")); // 输出：true

dict.delete("two");
console.log(dict.has("two")); // 输出：false

需要注意的是，在使用泛型类和泛型类型别名时，可以根据实际需求传入不同的类型参数，以适应不同的数据类型。

总结

泛型是TypeScript中非常重要的特性之一，它可以让我们在定义函数、类或接口时不预先指定具体的类型，而是在使用时再指定类型。通过使用泛型，我们可以增加代码的灵活性和复用性。在函数中使用泛型时，可以通过传入具体的类型参数来调用函数。在类型别名、接口、类中使用泛型时，可以在定义时指定类型参数，并在使用时传入具体的类型。同时，我们还可以对泛型进行约束以确保传入的类型满足某些条件。

使用泛型的一些技巧和需要注意的点如下：

• 可以同时定义多个泛型参数，例如 function foo<T, U>(arg1: T, arg2: U): void { ... }。
• 可以在泛型参数上使用约束，例如 function foo<T extends SomeType>(arg: T): void { ... }，其中 SomeType 是一个已知的类型。
• 可以在泛型参数上使用默认类型，例如 function foo<T = SomeType>(arg: T): void { ... }，其中 SomeType 是一个已知的类型。
• 在使用泛型时，可以显式指定泛型参数的类型，也可以让编译器自动推断泛型参数的类型。
• 在使用泛型时，需要注意传入的参数类型和返回值类型要与泛型参数相匹配，否则可能会导致编译错误或运行时错误。

---

😶 写在结尾

前端设计模式专栏

设计模式是软件开发中不可或缺的一部分，它们帮助我们解决了许多常见问题，并提供了一种优雅而可靠的方式来构建应用程序。在本专栏中，我们介绍了所有的前端设计模式，包括观察者模式、单例模式、策略模式等等。通过学习这些设计模式，并将其应用于实际项目中，我们可以提高代码的可维护性、可扩展性和可重用性。希望这个专栏能够帮助你在前端开发中更好地应用设计模式，写出高质量的代码。点击订阅前端设计模式专栏

Vue专栏

Vue.js是一款流行的JavaScript框架，用于构建用户界面。它采用了MVVM（Model-View-ViewModel）的架构模式，通过数据驱动和组件化的方式，使开发者能够更轻松地构建交互性强、可复用的Web应用程序。在这个专栏中，我们将深入探讨Vue.js的核心概念、组件开发、状态管理、路由和性能优化等方面的知识。我们将学习如何使用Vue.js构建响应式的用户界面，并探索其强大的生态系统，如Vue Router和Vuex、Pinia。通过学习这些内容，你将能够成为一名熟练的Vue.js开发者，并能够应用这些知识来构建复杂而高效的Web应用程序。点击订阅Vue专栏

JavaScript（ES6）专栏
JavaScript是一种广泛应用于网页开发和后端开发的脚本语言。它具有动态性、灵活性和易学性的特点，是构建现代Web应用程序的重要工具之一。在这个专栏中，我们将深入探讨JavaScript语言的基本语法、DOM操作、事件处理、异步编程以及常见算法和数据结构等内容。此外，我们还将介绍ES6（ECMAScript 2015）及其后续版本中引入的新特性，如箭头函数、模块化、解构赋值等。通过学习这些内容，你将能够成为一名熟练的JavaScript开发者，并能够应用这些知识来构建出高质量和可维护的Web应用程序。点击订阅JavaScript（ES6）专栏