TypeScript 条件语句

TypeScript 条件语句详解

TypeScript 的条件语句语法与 JavaScript 完全相同，包括 if、else if、else、switch 和三元运算符。TypeScript 的优势在于类型缩小（Type Narrowing）：通过条件判断，TS 能在编译时自动推断变量的更精确类型，从而提供更智能的代码补全和错误检查。

1. if / else if / else

基本语法：

if (condition1) {
  // 执行代码
} else if (condition2) {
  // 执行代码
} else {
  // 执行代码
}

示例 + 类型缩小演示：

let value: string | number = "Hello";

if (typeof value === "string") {
  // 这里 TS 知道 value 是 string
  console.log(value.toUpperCase());  // 安全调用字符串方法
  console.log(value.length);         // OK
} else {
  // 这里 TS 知道 value 是 number
  console.log(value.toFixed(2));     // 安全调用数字方法
}

// 另一个常见场景：处理 null / undefined
function greet(name: string | null) {
  if (name === null) {
    console.log("Hello, Guest!");
  } else {
    // 这里 name 被缩小为 string
    console.log(`Hello, ${name.toUpperCase()}`);
  }
}

2. 三元条件运算符（Ternary Operator）

语法：

condition ? exprIfTrue : exprIfFalse

示例：

let age: number = 20;
let status: string = age >= 18 ? "成人" : "未成年";
console.log(status);  // "成人"

// 嵌套三元（不推荐过多嵌套，可读性差）
let category = age < 13 ? "儿童" : age < 18 ? "青少年" : "成人";

TS 类型推断：结果类型为两个表达式的联合类型。

let result: string | number = age > 18 ? "成年" : 18;
// result 类型为 string | number

3. switch 语句

语法：

switch (expression) {
  case value1:
    // 代码
    break;
  case value2:
    // 代码
    break;
  default:
    // 代码
}

示例：

enum Color {
  Red = "RED",
  Green = "GREEN",
  Blue = "BLUE"
}

let color: Color = Color.Green;

switch (color) {
  case Color.Red:
    console.log("红色");
    break;
  case Color.Green:
    console.log("绿色");
    break;
  case Color.Blue:
    console.log("蓝色");
    break;
  default:
    // TS 会检查是否所有情况都覆盖（如果 Color 是有限联合类型）
    console.log("未知颜色");
}

TS 优势：

• 当 switch 的表达式是字面量联合类型（如字符串字面量或枚举）时，TS 会检查是否遗漏了某个 case（开启 strict 模式下更严格）。
• 支持类型缩小：

function handleStatus(status: "loading" | "success" | "error") {
  switch (status) {
    case "loading":
      console.log("正在加载...");
      break;
    case "success":
      console.log("成功！");  // status 类型被缩小为 "success"
      break;
    case "error":
      console.log("出错啦");
      break;
    // 如果漏掉一个 case，TS 会报错（exhaustive check）
  }
}

4. 真值/假值判断（Truthy / Falsy）

JavaScript/TS 中的假值（falsy）：
false、0、""（空字符串）、null、undefined、NaN

示例：

let username: string | undefined = "";

if (username) {
  console.log("有用户名");  // 不会执行，因为 "" 是 falsy
} else {
  console.log("无用户名");  // 执行
}

推荐更精确的检查（避免意外）：

if (username !== "" && username !== undefined) { ... }

// 或使用空值合并
let displayName = username ?? "默认用户";

5. 高级条件技巧（结合 TS 类型系统）

a. 类型守卫（Type Guards）

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

function process(value: string | number) {
  if (isString(value)) {
    // value 被缩小为 string
    value.toUpperCase();
  } else {
    value.toFixed();
  }
}

b. 可辨识联合类型（Discriminated Unions）

interface Circle {
  kind: "circle";
  radius: number;
}

interface Square {
  kind: "square";
  side: number;
}

type Shape = Circle | Square;

function getArea(shape: Shape): number {
  switch (shape.kind) {
    case "circle":
      return Math.PI * shape.radius ** 2;
    case "square":
      return shape.side ** 2;
    // TS 保证所有 kind 都被覆盖
  }
}

最佳实践建议

1. 优先使用 === 而非 ==。
2. 开启 strictNullChecks，强制处理 null/undefined。
3. 利用类型缩小减少类型断言（as）。
4. switch 用于多分支时，尤其适合联合类型和枚举。
5. 避免过深嵌套，可提取函数提高可读性。
6. 使用可选链和空值合并简化条件：

let length = user?.profile?.name?.length ?? 0;

小结：条件语句速查

语句类型	适用场景	TS 优势
if/else	简单二分支或多条件	类型缩小最强大
三元运算符	简单赋值或返回值	简洁，但不宜嵌套
switch	多值匹配（枚举、字面量联合）	穷尽性检查（exhaustive）
?? / ?.	处理 null/undefined	安全访问，避免空指针

如果您想看更多实际示例（如异步条件处理、结合 Promise 的条件、或 React 中的条件渲染），请告诉我！