TypeScript 条件语句

TypeScript 条件语句

引言

TypeScript 是 JavaScript 的超集，它添加了静态类型选项。这些类型可以在编译时期进行静态类型检查，从而提高代码的可靠性和可维护性。在 TypeScript 中，条件语句与 JavaScript 中的条件语句非常相似，但 TypeScript 的类型系统为这些语句带来了额外的优势。本文将探讨 TypeScript 中的条件语句，包括 if、else if、else、switch 以及可空链和类型守卫。

目录

1. 简介
2. if 语句
3. else if 语句
4. else 语句
5. switch 语句
6. 可空链操作符
7. 类型守卫
8. 总结

简介

条件语句是编程语言中的基础，它们允许根据不同的条件执行不同的代码路径。在 TypeScript 中，条件语句不仅用于控制程序的流程，还可以与类型系统交互，提供更安全的类型检查。

if 语句

if 语句是最基本的条件语句，它根据表达式的真假来决定是否执行一段代码。在 TypeScript 中，if 语句可以与类型系统结合，提供更精确的类型推断。

let x: number | string = Math.random() < 0.5 ? "hello" : 42;

if (typeof x === "string") {
  console.log(x.toUpperCase()); // 正确，x 被推断为 string 类型
} else {
  console.log(x.toFixed(2)); // 正确，x 被推断为 number 类型
}

else if 语句

else if 语句用于在多个条件中选择一个执行。与 if 语句类似，else if 也可以利用 TypeScript 的类型推断。

let x: number | string | boolean = Math.random() < 0.33 ? "hello" : (Math.random() < 0.5 ? 42 : true);

if (typeof x === "string") {
  console.log(x.toUpperCase()); // 正确，x 被推断为 string 类型
} else if (typeof x === "number") {
  console.log(x.toFixed(2)); // 正确，x 被推断为 number 类型
} else {
  console.log(x); // 正确，x 被推断为 boolean 类型
}

else 语句

else 语句用于在 if 和 else if 条件都不满足时执行。在 TypeScript 中，else 语句同样可以与类型推断结合。

let x: number | string = Math.random() < 0.5 ? "hello" : 42;

if (typeof x === "string") {
  console.log(x.toUpperCase()); // 正确，x 被推断为 string 类型
} else {
  console.log(x.toFixed(2)); // 正确，x 被推断为 number 类型
}

switch 语句

switch 语句用于基于不同的情况执行不同的代码块。在 TypeScript 中，switch 语句可以与枚举类型和字面量类型结合，提供更严格的类型检查。

enum Color {
  Red,
  Green,
  Blue
}

let color: Color = Color.Green;

switch (color) {
  case Color.Red:
    console.log("Red"); // 正确
    break;
  case Color.Green:
    console.log("Green"); // 正确
    break;
  case Color.Blue:
    console.log("Blue"); // 正确
    break;
  default:
    console.log("Unknown color"); // 正确
}

可空链操作符

TypeScript 3.7 引入了可空链操作符（?.），它允许安全地访问链式调用的属性和方法，即使中间的某个环节可能是 null 或 undefined。

interface User {
  info?: {
    name?: {
      first: string;
      last: string;
    };
  };
}

let user: User = {};

console.log(user.info?.name?.first); // 输出 undefined，而不是抛出错误

类型守卫

类型守卫是一种 TypeScript 表达式，用于确保一个变量在特定的代码块中是特定类型。类型守卫通常与 if、else if 或 switch 语句结合使用。

function isString(value: any): value is string {
  return typeof value === "string";
}

let x: any = "hello";

if (isString(x)) {
  console.log(x.toUpperCase()); // 正确，x 被推断为 string