TypeScript 中的其它类型：对 JavaScript 的超越

2024-01-18 18:08:18

超越 JavaScript：TypeScript 的扩展类型

JavaScript，作为一门动态语言，在开发上非常便利，但它缺乏类型检查机制，可能会导致运行时错误和维护困难。TypeScript 作为 JavaScript 的超集，引入了类型系统，让 JavaScript 开发者在开发过程中就能捕获类型错误，提升代码的可读性和可维护性。除了基本类型外，TypeScript 还提供了多种有趣而实用的类型，让你的代码表达更加灵活强大。

1. 联合类型：兼容多类型

联合类型允许一个变量同时接受多个类型的赋值。它使用管道符号（|）来连接不同的类型，表明变量可以是任何一种类型。

let x: string | number;
x = "Hello"; // 合法
x = 10; // 也合法

联合类型常用于处理来自不同来源的数据，例如：

function parseValue(value: string | number): void {
  if (typeof value === "string") {
    console.log(`字符串值：${value}`);
  } else if (typeof value === "number") {
    console.log(`数字值：${value}`);
  }
}

parseValue("TypeScript"); // 输出：字符串值：TypeScript
parseValue(123); // 输出：数字值：123

2. 元组：有序值集合

元组类型允许创建具有固定长度的有序值集合。它使用方括号（[]）来定义元组的元素类型和数量。

let person: [string, number];
person = ["Alice", 25]; // 合法
person = [10, "Bob"]; // 报错：类型不匹配

元组元素可以是任何类型，包括基本类型、联合类型、数组、对象等。元组常用于存储异构数据，例如：

type Address = [string, string, string];

let addresses: Address[] = [
  ["123 Main Street", "Anytown", "CA"],
  ["456 Elm Street", "Anytown", "CA"]
];

console.log(addresses[0]); // 输出：["123 Main Street", "Anytown", "CA"]

3. 枚举：可枚举类型

枚举类型允许创建具有固定值的集合。它使用 enum 来定义枚举类型，并使用逗号分隔每个枚举成员。

enum Color {
  Red,
  Green,
  Blue
}

let color: Color = Color.Red; // 合法
color = "Purple"; // 报错：类型不匹配

枚举成员可以是数字或字符串。枚举常用于表示有限的一组选项，例如：

enum HTTPStatusCode {
  OK = 200,
  BadRequest = 400,
  NotFound = 404
}

function getStatusCode(url: string): HTTPStatusCode {
  // 模拟向服务器发送请求并获取状态码
  return HTTPStatusCode.OK;
}

console.log(getStatusCode("/api/users")); // 输出：200

4. 函数约束：控制函数行为

函数约束允许对函数的行为进行约束，例如：指定函数的参数类型和返回值类型。在 TypeScript 中，可以使用类型别名来定义函数约束。

type NumberFunction = (a: number, b: number) => number;

let add: NumberFunction = (a, b) => a + b;

console.log(add(1, 2)); // 输出：3

函数约束常用于定义回调函数的类型，确保回调函数具有正确的参数和返回值类型。例如：

function forEach(array: number[], callback: (item: number) => void) {
  for (const item of array) {
    callback(item);
  }
}

forEach([1, 2, 3], (item) => console.log(item)); // 输出：1 2 3