TypeScript 的私房好物：让你的代码更灵光

2024-02-03 01:17:42

好的，以下是有关“TypeScript中的 ‘冷门‘ 语法”的文章。

在现代前端工程中，TypeScript 是一种非常流行的语言。它不仅可以帮助我们避免 JavaScript 中常见的错误，还可以通过静态类型系统来提高代码的可读性和可维护性。然而，TypeScript 中还有一些鲜为人知的语法特性，但它们却能极大地提高代码的可读性、可维护性和可重用性。

在本文中，我们将介绍一些这些 “冷门“ 语法，并演示如何将它们应用到实际项目中。

1. 元组类型

元组类型是一种特殊的数组类型，它允许我们定义数组中每个元素的类型。例如，我们可以定义一个元组类型来表示一个人的姓名和年龄：

type Person = [string, number];

这样，我们就可以使用 Person 类型来定义变量和函数参数：

let person1: Person = ["Alice", 20];
function greet(person: Person) {
  console.log(`Hello, ${person[0]}! You are ${person[1]} years old.`);
}

元组类型非常适合表示具有固定数量和类型的元素的数据结构。例如，我们可以使用元组类型来表示一个购物车的商品列表：

type ShoppingCartItem = [string, number];

let shoppingCart: ShoppingCartItem[] = [
  ["Apple", 5],
  ["Banana", 3],
  ["Orange", 2],
];

2. 枚举类型

枚举类型是一种特殊的类型，它允许我们定义一组具有相同类型的常量。例如，我们可以定义一个枚举类型来表示一周中的每一天：

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

这样，我们就可以使用 DayOfWeek 类型来定义变量和函数参数：

let today: DayOfWeek = DayOfWeek.Friday;
function isWeekend(day: DayOfWeek): boolean {
  return day === DayOfWeek.Saturday || day === DayOfWeek.Sunday;
}

枚举类型非常适合表示一组具有固定值的数据。例如，我们可以使用枚举类型来表示一个状态机的状态：

enum State {
  Start,
  Running,
  Stopped,
}

3. 接口

接口是一种特殊的类型，它允许我们定义一组方法和属性。例如，我们可以定义一个接口来表示一个动物：

interface Animal {
  name: string;
  age: number;
  eat(): void;
  sleep(): void;
}

这样，我们就可以使用 Animal 接口来定义类和函数参数：

class Dog implements Animal {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  eat() {
    console.log(`${this.name} is eating.`);
  }

  sleep() {
    console.log(`${this.name} is sleeping.`);
  }
}

function feedAnimal(animal: Animal) {
  animal.eat();
}

接口非常适合表示具有相同方法和属性的数据结构。例如，我们可以使用接口来表示一个数据库中的表格：

interface User {
  id: number;
  name: string;
  email: string;
}

4. 泛型

泛型是一种特殊的类型变量，它允许我们定义可以在多种类型上使用的类、接口和函数。例如，我们可以定义一个泛型类来表示一个堆栈：

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];
  }
}

这样，我们就可以使用 Stack 类来创建各种类型的堆栈：

let numberStack = new Stack<number>();
numberStack.push(1);
numberStack.push(2);
numberStack.push(3);

console.log(numberStack.pop()); // 3
console.log(numberStack.peek()); // 2

let stringStack = new Stack<string>();
stringStack.push("Alice");
stringStack.push("Bob");
stringStack.push("Carol");

console.log(stringStack.pop()); // "Carol"
console.log(stringStack.peek()); // "Bob"

泛型非常适合表示可以在多种类型上使用的算法和数据结构。例如，我们可以使用泛型来定义一个排序算法：

function sort<T>(array: T[]): T[] {
  return array.sort((a, b) => a - b);
}

这样，我们就可以使用 sort 函数来对各种类型的数组进行排序：

let numbers = [1, 2, 3, 4, 5];
console.log(sort(numbers)); // [1, 2, 3, 4, 5]

let strings = ["Alice", "Bob", "Carol"];
console.log(sort(strings)); // ["Alice", "Bob", "Carol"]