返回

TypeScript 笔记(三):联合类型、枚举类型及泛型,开发事半功倍

前端

在 TypeScript 中,联合类型允许您将多个类型组合成一个单一的类型。这可以用于表示可以具有多种类型的值。例如,您可以定义一个联合类型来表示一个变量可以是字符串或数字:

type MyUnionType = string | number;

现在,您可以将任何字符串或数字值分配给此联合类型变量:

let myUnionVariable: MyUnionType = "Hello";
myUnionVariable = 10;

联合类型还可以用于函数参数和返回值类型。例如,您可以定义一个函数来接受一个联合类型参数,并返回一个字符串或数字:

function myFunction(input: MyUnionType): string | number {
  if (typeof input === "string") {
    return input.toUpperCase();
  } else {
    return input.toFixed(2);
  }
}

调用此函数时,您可以传递字符串或数字,它将返回相应类型的字符串或数字:

const result = myFunction("Hello"); // "HELLO"
const result2 = myFunction(10.5); // "10.50"

类型保护是检查联合类型变量的类型的一种方法。这可以通过使用 typeof 操作符或 instanceof 操作符来完成。例如,以下代码检查联合类型变量是否为字符串:

if (typeof myUnionVariable === "string") {
  // Do something with the string
}

枚举类型是表示一组相关常量的一种方法。它们通常用于表示一组有限的选项。例如,您可以定义一个枚举类型来表示一周中的天:

enum DayOfWeek {
  Sunday,
  Monday,
  Tuesday,
  Wednesday,
  Thursday,
  Friday,
  Saturday
}

现在,您可以使用枚举值来表示一周中的任何一天:

const today: DayOfWeek = DayOfWeek.Friday;

枚举类型还可以用于函数参数和返回值类型。例如,您可以定义一个函数来接受一个枚举值作为参数,并返回一个字符串:

function getDayName(day: DayOfWeek): string {
  switch (day) {
    case DayOfWeek.Sunday:
      return "Sunday";
    case DayOfWeek.Monday:
      return "Monday";
    // ...
    default:
      return "Unknown day";
  }
}

调用此函数时,您可以传递一个枚举值,它将返回相应的天名:

const dayName = getDayName(DayOfWeek.Friday); // "Friday"

泛型是一种允许您创建可重用的组件的方式,这些组件可以在不同的类型上使用。例如,您可以定义一个泛型函数来比较两个值,而不管它们的类型是什么:

function compare<T>(a: T, b: T): number {
  if (a < b) {
    return -1;
  } else if (a > b) {
    return 1;
  } else {
    return 0;
  }
}

现在,您可以使用此函数来比较任何两个值,而不管它们的类型是什么:

const result = compare(10, 20); // -1
const result2 = compare("Hello", "World"); // 1

泛型还可以用于类和接口。例如,您可以定义一个泛型类来表示一个栈:

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

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

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

  peek(): T | undefined {
    return this.items[this.items.length - 1];
  }
}

现在,您可以使用此类来创建任何类型的栈:

const numberStack = new Stack<number>();
numberStack.push(10);
numberStack.push(20);
console.log(numberStack.pop()); // 20

const stringStack = new Stack<string>();
stringStack.push("Hello");
stringStack.push("World");
console.log(stringStack.pop()); // "World"

联合类型、枚举类型和泛型是 TypeScript 中非常强大的工具。它们可以帮助您编写更灵活、更可重用的代码。通过理解这些类型的概念并将其应用到您的项目中,您将能够提高开发效率和代码质量。