前端实践——TypeScript 类、泛型的使用实践记录| 青训营

64 阅读3分钟

TypeScript 是一种基于 JavaScript 的静态类型语言,它可以让我们在编写代码时就能检查出潜在的类型错误,提高代码的质量和可维护性。TypeScript 中的一个重要特性就是泛型,它可以让我们定义一些通用的类型,从而实现代码的复用和抽象。

什么是泛型?

泛型(Generic)是指在定义函数、接口或类时,不预先指定具体的类型,而是在使用时再指定类型的一种特性。例如,我们可以定义一个泛型函数:

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

这个函数的作用是返回传入的参数,它使用了一个类型变量 T 来表示参数和返回值的类型。这个 T 就是一个泛型,它可以在调用函数时用任意类型替换,例如:

let str = identity<string>("Hello"); // str 的类型是 string
let num = identity<number>(42); // num 的类型是 number
let arr = identity<string[]>(["a", "b", "c"]); // arr 的类型是 string[]

通过使用泛型,我们可以让 identity 函数适用于任何类型的参数,而不需要为每种类型都写一个重载或者使用 any 类型。

为什么要使用泛型?

泛型的优势在于它可以让我们在编写代码时保持类型的一致性和约束性,从而避免一些潜在的错误和冗余。例如,假设我们要实现一个栈(Stack)类,它有两个方法:pushpop。如果我们不使用泛型,我们可能会这样写:

class Stack {
  private items: any[] = [];

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

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

这样的代码有几个问题:

  • 我们不能保证栈中存储的元素都是同一种类型,这可能会导致运行时错误或者数据混乱。
  • 我们不能知道栈中元素的具体类型,这可能会影响我们对栈中元素的操作或者使用。
  • 我们不能限制栈中元素的数量或者其他属性,这可能会导致栈溢出或者其他异常。

如果我们使用泛型,我们可以改进上面的代码:

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

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

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

这样的代码有几个优点:

  • 我们可以指定栈中存储的元素的类型,这可以保证栈中元素的一致性和安全性。
  • 我们可以知道栈中元素的具体类型,这可以方便我们对栈中元素的操作或者使用。
  • 我们可以对栈中元素的数量或者其他属性进行限制或者扩展,这可以增加栈的功能和灵活性。

如何使用泛型?

TypeScript 中有多种方式可以使用泛型,例如:

  • 泛型函数:如上面例子中的 identity 函数。
  • 泛型接口:定义一个包含泛型参数的接口,例如:
interface Comparable<T> {
  compareTo(other: T): number;
}
  • 泛型类:定义一个包含泛型参数的类,例如上面例子中的 Stack 类。
  • 泛型约束:定义一个限制泛型参数必须满足的条件,例如:
interface Lengthwise {
  length: number;
}

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

这个函数只能接受具有 length 属性的参数,例如字符串或者数组。

  • 泛型工具类型:使用一些内置的或者自定义的类型操作符来创建新的泛型类型,例如:
type Partial<T> = {
  [P in keyof T]?: T[P];
};

这个类型可以将一个类型的所有属性都变为可选的,例如:

interface Person {
  name: string;
  age: number;
}

type PartialPerson = Partial<Person>;
// 等价于
// type PartialPerson = {
//   name?: string;
//   age?: number;
// };

总结

TypeScript 中的泛型是一种强大的特性,它可以让我们定义一些通用的类型,从而实现代码的复用和抽象。通过使用泛型,我们可以在编写代码时保持类型的一致性和约束性,从而提高代码的质量和可维护性。TypeScript 提供了多种方式和工具来使用泛型,我们可以根据不同的场景和需求来选择合适的方式。泛型是 TypeScript 的核心特性之一,值得我们深入学习和掌握。