返回

深入浅出十二个TypeScript内置工具类型，入门TypeScript超容易！

前端

TypeScript作为一种广泛应用的超集语言，兼具了JavaScript的诸多优势，还增加了许多TypeScript专属的新特性。这些特性让它在软件开发领域大展拳脚，尤其是那些开发前端应用的工程师们，TypeScript已经成为必备武器。

本篇文章通过拆解十二个TypeScript内置工具类型的实现思路，让你快速掌握TypeScript的基础知识。文章中，我们将逐一解析每一个工具类型，涵盖使用场景、代码示例和应用技巧，让你真正理解这些工具类型的妙处。

一、接口（interface）

接口是TypeScript中使用广泛的工具类型之一，它允许我们定义对象的结构和行为。通过接口，我们可以确保对象具有特定属性和方法，提高代码的可读性和可维护性。

1. 定义接口

interface Person {
  name: string;
  age: number;
  greet(phrase: string): void;
}

2. 实现接口

class Employee implements Person {
  name: string;
  age: number;

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

  greet(phrase: string): void {
    console.log(`${phrase} ${this.name}`);
  }
}

二、类型别名（type alias）

类型别名允许我们为现有类型创建一个新名称，简化代码阅读和理解。通过类型别名，我们可以重命名复杂或难以理解的类型，使代码更加简洁明了。

1. 定义类型别名

type StringOrNumber = string | number;

2. 使用类型别名

function add(a: StringOrNumber, b: StringOrNumber): StringOrNumber {
  if (typeof a === "string" || typeof b === "string") {
    return a.toString() + b.toString();
  } else {
    return a + b;
  }
}

三、联合类型（union type）

联合类型允许我们定义一个变量或表达式的类型可以是多种类型之一。通过联合类型，我们可以处理不同类型的输入，提高代码的灵活性和可扩展性。

1. 定义联合类型

type NameOrAge = string | number;

2. 使用联合类型

function greet(nameOrAge: NameOrAge): void {
  if (typeof nameOrAge === "string") {
    console.log(`Hello ${nameOrAge}`);
  } else {
    console.log(`Your age is ${nameOrAge}`);
  }
}

四、交集类型（intersection type）

交集类型允许我们定义一个变量或表达式的类型可以是多个类型的组合。通过交集类型，我们可以合并多个类型的特性，创建出新的类型，使代码更加灵活和安全。

1. 定义交集类型

type PersonInfo = {
  name: string;
} & {
  age: number;
};

2. 使用交集类型

function printPersonInfo(person: PersonInfo): void {
  console.log(`Name: ${person.name}, Age: ${person.age}`);
}

五、字面量类型（literal type）

字面量类型允许我们定义一个变量或表达式的类型只能是特定的值。通过字面量类型，我们可以提高代码的可读性和安全性，避免意外赋值的情况发生。

1. 定义字面量类型

type Direction = "up" | "down" | "left" | "right";

2. 使用字面量类型

function move(direction: Direction): void {
  switch (direction) {
    case "up":
      // Move up code
      break;
    case "down":
      // Move down code
      break;
    case "left":
      // Move left code
      break;
    case "right":
      // Move right code
      break;
  }
}

六、枚举类型（enum）

枚举类型允许我们定义一组具有相同类型的常量值。通过枚举类型，我们可以创建易于理解和维护的代码，提高代码的可读性和安全性。

1. 定义枚举类型

enum Direction {
  Up = "up",
  Down = "down",
  Left = "left",
  Right = "right",
}

2. 使用枚举类型

function move(direction: Direction): void {
  switch (direction) {
    case Direction.Up:
      // Move up code
      break;
    case Direction.Down:
      // Move down code
      break;
    case Direction.Left:
      // Move left code
      break;
    case Direction.Right:
      // Move right code
      break;
  }
}

七、元组类型（tuple）

元组类型允许我们定义一个固定长度的数组，其中每个元素的类型可以不同。通过元组类型，我们可以创建结构化数据，提高代码的可读性和可维护性。

1. 定义元组类型

type PersonTuple = [string, number];

2. 使用元组类型

const person: PersonTuple = ["John Doe", 30];
console.log(`Name: ${person[0]}, Age: ${person[1]}`);

八、映射类型（mapped type）

映射类型允许我们创建一个新的类型，其中每个属性的类型都是根据原始类型的属性类型转换而来。通过映射类型，我们可以创建更加灵活和可重用的代码。

1. 定义映射类型

type PersonMappedType = {
  [key: string]: string | number;
};

2. 使用映射类型

const person: PersonMappedType = {
  name: "John Doe",
  age: 30,
};

for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}

九、条件类型（conditional type）

条件类型允许我们根据一个条件来定义一个新的类型。通过条件类型，我们可以创建更具灵活性