TypeScript 条件语句（长文解析）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在编程世界中，条件语句如同交通指挥系统，决定了程序的执行路径。无论是判断用户是否登录、计算折扣金额，还是根据环境配置加载资源，TypeScript 条件语句都是实现逻辑分支的核心工具。对于编程初学者而言，掌握条件语句的语法与应用场景，是迈向复杂逻辑编程的关键一步；而对中级开发者来说，深入理解其高级特性（如类型守卫与可选链操作），则能显著提升代码的健壮性和可维护性。

本文将从基础语法到进阶技巧，结合实际案例，系统讲解 TypeScript 条件语句的使用方法，并通过代码示例和形象比喻，帮助读者快速掌握这一核心编程概念。

一、基础语法：if-else 的逻辑世界

1.1 if 语句：条件判断的基石

if 语句是最基础的条件语句，其核心逻辑是“如果条件为真，则执行代码块”。在 TypeScript 中，其语法与 JavaScript 完全一致，但通过类型系统的支持，能提前发现潜在的类型错误。

语法结构：

if (条件表达式) {  
  // 当条件为 true 时执行的代码  
}  

示例：

let temperature = 30;  
if (temperature > 25) {  
  console.log("今天天气炎热，记得带伞！");  
}  

比喻：
可以将 if 语句想象为一个交通灯。当红灯亮起（条件为真）时，车辆（代码块）才会通行；若灯为绿灯（条件为假），车辆则静止不动。

1.2 else 和 else if：扩展逻辑分支

通过 else 和 else if，可以构建多分支的条件判断，覆盖更多场景。

语法结构：

if (条件1) {  
  // 条件1为真时执行  
} else if (条件2) {  
  // 条件1为假且条件2为真时执行  
} else {  
  // 所有条件均为假时执行  
}  

示例：

let age = 18;  
if (age < 18) {  
  console.log("未成年，禁止进入");  
} else if (age >= 18 && age < 60) {  
  console.log("成年人，正常通行");  
} else {  
  console.log("老年人，提供优先服务");  
}  

关键点：

• 条件表达式的结果必须为布尔值（true 或 false）。
• 若多个 else if 存在，程序会按顺序检查每个条件，直到找到第一个为真的分支。

二、进阶用法：switch 语句与类型守卫

2.1 switch 语句：多值匹配的便捷工具

当需要根据一个变量的多个可能值执行不同操作时，switch 语句比多个 else if 更简洁直观。

语法结构：

switch (表达式) {  
  case 值1:  
    // 匹配值1时执行的代码  
    break;  
  case 值2:  
    // 匹配值2时执行的代码  
    break;  
  default:  
    // 所有情况均不匹配时执行  
}  

示例：

let day = "Monday";  
switch (day) {  
  case "Monday":  
    console.log("新的一周开始啦！");  
    break;  
  case "Friday":  
    console.log("周末快到了，继续加油！");  
    break;  
  default:  
    console.log("平凡但充实的工作日");  
}  

注意事项：

• 每个 case 分支必须以 break 结尾，否则会触发“穿透”（fall-through）行为，即执行后续所有未 break 的分支。
• default 分支是可选的，但建议添加以处理未预见的情况。

2.2 类型守卫：类型安全的条件判断

TypeScript 的独特之处在于其类型系统。通过 类型守卫（Type Guards），可以在运行时动态判断变量类型，从而安全地访问类型特有的属性或方法。

常见类型守卫：

• typeof：检查变量的原始类型（如 number、string）。
• instanceof：检查对象是否是某个类的实例。
• 用户自定义守卫函数（如 isUserLoggedIn(user: any): user is User）。

示例：

function printValue(value: unknown) {  
  if (typeof value === "string") {  
    console.log(`字符串长度：${value.length}`);  
  } else if (Array.isArray(value)) {  
    console.log(`数组元素数量：${value.length}`);  
  } else {  
    console.log("未知类型");  
  }  
}  

printValue("Hello");  // 输出：字符串长度：5  
printValue([1, 2, 3]); // 输出：数组元素数量：3  

比喻：
类型守卫如同机场安检，只有通过身份验证（类型检查）的“乘客”（变量），才能进入特定区域（访问类型专属方法）。

三、高级技巧：可选链操作符与短路求值

3.1 可选链操作符（?.）：避免空值报错

当需要访问对象的嵌套属性时，若中间属性可能为 null 或 undefined，传统写法需要多层 if 判断。而 可选链操作符 可简化这一过程，若链式访问的任意环节为 null/undefined，则直接返回 undefined，而非抛出错误。

语法示例：

const user = {  
  profile: {  
    address: "123 Main St"  
  }  
};  

// 传统写法  
if (user && user.profile) {  
  console.log(user.profile.address);  
}  

// 可选链写法  
console.log(user?.profile?.address); // 输出：123 Main St  
console.log(null?.profile);          // 输出：undefined  

3.2 短路求值（??）：默认值的优雅替代

空值合并运算符（??） 可在左侧表达式为 null 或 undefined 时，返回右侧的默认值。这比传统的 || 更精准，因为 || 会将 0、false 等“假值”也视为需要替代的情况。

示例对比：

// 场景：获取用户输入的年龄，若未填写则默认设为 18  
let ageInput: number | undefined;  

// 使用 ??  
const age = ageInput ?? 18;  

// 使用 || 会出错  
const wrongAge = ageInput || 18; // 若 ageInput 为 0，则会被误判为 falsy，返回 18  

四、最佳实践与常见误区

4.1 避免“链式 else if”的复杂性

当条件分支超过 3 层时，代码可读性会显著下降。此时可考虑以下优化方案：

• 策略模式：将每个条件分支封装为独立函数。
• Map 对象：用键值对映射条件与执行逻辑。

示例：

// 原始写法  
if (action === "login") {  
  handleLogin();  
} else if (action === "logout") {  
  handleLogout();  
} else if (action === "register") {  
  handleRegister();  
}  

// 优化后  
const actionHandlers = new Map([  
  ["login", handleLogin],  
  ["logout", handleLogout],  
  ["register", handleRegister]  
]);  

actionHandlers.get(action)?.();  

4.2 类型守卫的局限性

类型守卫仅在局部有效，且无法覆盖所有类型检查场景。例如，当变量可能属于多个类型时，需确保所有分支都经过类型验证。

错误示例：

interface User {  
  name: string;  
  age: number;  
}  

interface Guest {  
  name: string;  
  isVIP: boolean;  
}  

function greet(person: User | Guest) {  
  if ("age" in person) {  
    console.log(`用户 ${person.name}，年龄 ${person.age}`);  
  } else {  
    // 此处 TypeScript 仍认为 person 可能是 User 或 Guest  
    // 因为 "age" in person 为 false 并不完全排除 User 类型  
    console.log(`访客 ${person.name}`); // 报错：property 'name' may not exist  
  }  
}  

解决方案：
使用更精准的类型守卫（如 isUser 函数）或结合 typeof/instanceof。

结论

通过本文的学习，读者应已掌握 TypeScript 条件语句 的核心用法，从基础的 if-else 和 switch，到进阶的类型守卫和可选链操作符。这些工具不仅简化了逻辑分支的编写，还通过 TypeScript 的类型系统显著提升了代码安全性。

在实际开发中，建议遵循以下原则：

1. 优先使用类型守卫，确保操作对象的类型安全；
2. 善用可选链与空值合并符，减少空值报错的可能；
3. 避免深层嵌套条件，通过设计模式优化复杂逻辑。

编程如同搭建一座桥梁，条件语句则是桥上的关键节点。只有理解其原理并合理运用，才能构建出既高效又可靠的代码架构。希望本文能成为你探索 TypeScript 世界的坚实阶梯！