TypeScript 类、泛型的使用实践记录 ｜ 青训营

xg
40 阅读5分钟

前言：在TypeScript中，类是一种特殊的对象，它可以描述一个对象的属性和方法。而泛型是 TypeScript 中的一种特殊类型，可以让我们在定义函数、类、接口时使用不确定的数据类型。且使用类型约束来增加代码的灵活性和安全性是TypeScript的一大特点。在本文中将要探讨TypeScript中的泛型的使用方法和场景，以及如何使用类型约束来增加代码的灵活性和安全性。

一、TypeScript中的泛型的使用方法和场景

泛型是一种让类型具有更广泛的适用性的能力，它可以让我们在编写代码时不必指定类型，而是在使用时再根据需要指定类型。TypeScript中的泛型可以用于函数、类、接口等各种场景，下面是一些泛型的使用方法和场景：

  1. 函数泛型

函数泛型可以让我们在定义函数时不必指定参数的具体类型，而是在调用函数时根据需要指定类型。例如：

function identity<T>(arg: T): T {
  return arg;
}
let output = identity<string>("hello world");
console.log(output); // 输出 "hello world"
  1. 类泛型

类泛型可以让我们在定义类时不必指定类成员的具体类型，而是在实例化类时根据需要指定类型。例如：

class GenericNumber<T> {
  zeroValue: T;
  add: (x: T, y: T) => T;
}
let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };
  1. 接口泛型

接口泛型可以让我们在定义接口时不必指定具体类型，而是在实现接口时根据需要指定类型。例如：

interface GenericIdentityFn<T> {
  (arg: T): T;
}
function identity<T>(arg: T): T {
  return arg;
}
let myIdentity: GenericIdentityFn<number> = identity;
  1. 泛型约束

泛型约束可以让我们限制泛型的类型范围，例如只允许传入具有length属性的类型。例如：

interface Lengthwise {
  length: number;
}
function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length);
  return arg;
}
loggingIdentity({length: 10, value: 3}); // 输出 10

总的来说，泛型的使用方法和场景是当需要处理不确定的数据类型时，可以使用泛型来处理。泛型可以在函数、接口、类中使用，可以使代码更加灵活和可扩展。在实际开发中，我们可以根据具体的业务需求选择合适的泛型来解决问题。

  1. 泛型在集合类型的操作

在处理集合类型（如数组、列表等）时，我们通常需要进行一些操作，例如筛选、排序、去重等。这些操作的具体实现可能会涉及到不同类型的数据，而泛型可以帮助我们实现这些通用的操作。

如下所示，定义了一个filter函数，它可以接受一个集合和一个条件函数，返回满足条件的元素组成的新集合：

function filter<T>(arr: T[], fn: (item: T) => boolean): T[] {
  const result: T[] = [];
  for (const item of arr) {
    if (fn(item)) {
      result.push(item);
    }
  }
  return result;
}
const nums = [1, 2, 3, 4, 5];
const evenNums = filter(nums, n => n % 2 === 0);
console.log(evenNums); // [2, 4]

这里的filter函数使用了泛型类型参数T，表示集合中元素的类型不确定，可以是任何类型。在函数内部，我们使用了T[]表示一个T类型的数组，这样就可以处理任何类型的集合了。

  1. 泛型用于类型安全的数据结构

在编写复杂的程序时，我们通常需要使用一些数据结构来存储和操作数据，例如栈、队列、堆等。使用泛型可以帮助我们实现类型安全的数据结构，避免一些常见的错误。

如下所示，定义了一个栈数据结构，它可以存储任何类型的数据，但是在弹出数据时会自动转换为正确的类型：

class Stack<T> {
  private items: T[] = [];
  push(item: T) {
    this.items.push(item);
  }
  pop(): T | undefined {
    return this.items.pop();
  }
}
const stack = new Stack<number>();
stack.push(1);
stack.push(2);
stack.push(3);
console.log(stack.pop()); // 3
console.log(stack.pop()); // 2
console.log(stack.pop()); // 1

这里的Stack类使用了泛型类型参数T，表示栈中元素的类型不确定，可以是任何类型。在类内部，我们使用了T[]表示一个T类型的数组，这样就可以存储任何类型的数据了。在弹出数据时，我们使用了T | undefined表示返回值的类型，这样就可以避免弹出空栈时的类型错误。

二、如何使用类型约束来增加代码的灵活性和安全性

使用类型约束来增加代码的灵活性和安全性是 TypeScript 的一大特点。类型约束可以在编译期间检查类型错误，减少运行时错误，从而提高代码的可维护性和可靠性。以下是一些使用类型约束的方法：

  1. 类型注解

类型注解是指在变量、函数、类等定义时，使用冒号来指定变量、参数、返回值等的类型。例如：

let name: string = 'Tom';
function add(x: number, y: number): number {
  return x + y;
}
class Person {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

使用类型注解可以在定义时约束变量、函数、类等的类型，从而提高代码的可读性和可维护性。

  1. 接口

接口是一种约束类型的方式，可以用来定义对象的形状、函数的参数和返回值等。例如：

interface Person {
  name: string;
  age: number;
}
function printPerson(person: Person): void {
  console.log(`Name: ${person.name}, Age: ${person.age}`);
}

使用接口可以约束函数的参数类型和返回值类型，从而减少类型错误。

  1. 类型别名

类型别名是指给一个类型起一个别名，可以用来简化复杂类型的定义。例如：

type Person = {
  name: string;
  age: number;
}
function printPerson(person: Person): void {
  console.log(`Name: ${person.name}, Age: ${person.age}`);
}

使用类型别名可以让代码更加简洁和易读。

  1. 泛型

泛型是一种特殊类型，可以在定义函数、类、接口时使用不确定的数据类型。例如：

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

let output1 = identity<string>("myString"); // output1 = "myString"
let output2 = identity<number>(100); // output2 = 100

使用泛型可以使代码更加灵活，可以处理不同类型的数据。 总的来说，使用类型约束可以提高代码的灵活性和安全性，可以在编译期间检查类型错误，减少运行时错误，从而提高代码的可维护性和可靠性。在实际开发中，我们应该根据具体的业务需求选择合适的类型约束方式来处理。

avatar
文章
阅读
粉丝