TypeScript 条件语句：让代码变得聪明起来
在编程的世界里，条件语句就像是一条条“决策路径”。你写一段代码，它不会总是按顺序执行，而是会根据某些条件“判断”该走哪条路。TypeScript 作为 JavaScript 的超集，不仅保留了 JavaScript 的灵活性，还通过类型系统让这些条件判断更加安全、清晰。今天，我们就来深入聊聊 TypeScript 条件语句——它如何让你的程序“有脑子”，而不是机械地跑一遍。
如果你刚刚接触 TypeScript，可能会觉得“条件语句”不过是 if…else 这些老朋友，但当你真正开始用类型系统配合条件判断时，你会发现它的威力远不止于此。我们不讲理论堆砌，只讲实用、可落地的写法，哪怕你是初学者，也能快速上手。
if…else 语句：最基础的判断逻辑
if…else 是所有编程语言中最基础的条件语句结构。在 TypeScript 中，它的语法和 JavaScript 完全一致，但因为类型系统的加持，你可以在判断时更安全地使用变量。
function checkUserStatus(status: string): string {
// 判断用户状态是否为 'active'
if (status === 'active') {
return '用户处于激活状态';
} else if (status === 'pending') {
return '用户等待审核';
} else {
return '用户状态未知';
}
}
// 调用函数
console.log(checkUserStatus('active')); // 输出：用户处于激活状态
console.log(checkUserStatus('pending')); // 输出：用户等待审核
console.log(checkUserStatus('banned')); // 输出：用户状态未知
注释说明：
status: string是 TypeScript 的类型声明，表示参数必须是字符串类型。===是严格相等判断，避免类型隐式转换带来的问题。- 每个
if和else if都会检查一个条件，只有第一个为true的分支会被执行。 else是兜底逻辑，确保所有情况都被覆盖。
💡 小贴士：在实际项目中，建议为
else提供明确的注释，比如// 默认情况处理，提升代码可读性。
三元运算符：简洁的条件表达式
当你只需要根据一个条件返回两个值时，三元运算符 ? : 是非常优雅的选择。它让代码更紧凑，逻辑更清晰。
function getUserGreeting(name: string | null): string {
// 使用三元运算符判断 name 是否为 null
return name ? `你好，${name}！欢迎回来` : '请先登录';
}
console.log(getUserGreeting('Alice')); // 输出：你好，Alice！欢迎回来
console.log(getUserGreeting(null)); // 输出：请先登录
注释说明：
name: string | null表示参数可能是字符串，也可能是null。name ? ... : ...是三元运算符的语法：如果name为真（非空、非零、非 undefined），执行前面的表达式；否则执行后面的。- 三元运算符返回一个值，所以可以直接用在
return中，无需额外变量。
✅ 优势：代码更简洁，适合简单的条件返回。
❌ 限制：不适合复杂逻辑，嵌套太多会降低可读性。
switch 语句：多条件分支的优雅选择
当你要判断的条件超过两个，且每个条件都对应不同的处理逻辑时，switch 语句就比一连串 if...else if 更清晰。
function getGradeLetter(score: number): string {
// 根据分数范围返回对应的等级
switch (true) {
case score >= 90:
return 'A';
case score >= 80:
return 'B';
case score >= 70:
return 'C';
case score >= 60:
return 'D';
default:
return 'F';
}
}
console.log(getGradeLetter(95)); // 输出：A
console.log(getGradeLetter(75)); // 输出：C
console.log(getGradeLetter(50)); // 输出：F
注释说明：
switch (true)是关键技巧：我们不比较变量本身，而是判断true是否满足某个条件。- 每个
case后面跟的是布尔表达式，比如score >= 90。 break在 TypeScript 中是可选的（但推荐加上），防止“穿透”执行。default是必选项，避免遗漏情况。
⚠️ 注意：如果忘记写
break，JavaScript 会继续执行下一个case，这在某些场景下是 bug 的来源。
类型守卫与条件语句：TypeScript 的“高级玩法”
这才是 TypeScript 条件语句真正厉害的地方：结合类型判断，实现类型安全的条件分支。
interface Animal {
name: string;
species: string;
}
interface Dog extends Animal {
bark(): void;
}
interface Cat extends Animal {
meow(): void;
}
function makeSound(animal: Animal): void {
// 使用类型守卫判断 animal 是否是 Dog 类型
if ('bark' in animal) {
animal.bark(); // TypeScript 知道此时 animal 是 Dog 类型
} else if ('meow' in animal) {
animal.meow(); // 此时 animal 是 Cat 类型
} else {
console.log('未知动物，无法发声');
}
}
// 示例调用
const dog = { name: '旺财', species: '犬', bark: () => console.log('汪汪！') };
const cat = { name: '小咪', species: '猫', meow: () => console.log('喵喵~') };
makeSound(dog); // 输出：汪汪！
makeSound(cat); // 输出：喵喵~
注释说明：
in操作符用于检查对象是否拥有某个属性。- 当
if ('bark' in animal)成立时，TypeScript 会“缩小”类型范围，把animal推断为Dog类型。 - 这种机制叫“类型守卫”（Type Guard），是 TypeScript 的核心特性之一。
- 你可以在
else if中安全调用meow()，因为 TypeScript 知道它不是Dog。
🎯 举个比喻：类型守卫就像“门禁系统”。你走进一个大楼，系统先检查你有没有门禁卡（属性），有卡的人才能进入对应区域（类型）。这样，每个区域的人只做自己该做的事，不会串门出错。
实际应用：用户权限校验系统
让我们用一个完整的例子，展示如何在真实项目中组合使用多种条件语句。
type Role = 'admin' | 'editor' | 'viewer';
interface User {
name: string;
role: Role;
isActive: boolean;
}
function checkAccess(user: User, action: string): string {
// 第一步：判断用户是否激活
if (!user.isActive) {
return '用户未激活，无法操作';
}
// 第二步：根据角色判断权限
switch (user.role) {
case 'admin':
return `管理员 ${user.name} 可以执行 ${action} 操作`;
case 'editor':
// 只允许编辑相关操作
if (['create', 'update', 'delete'].includes(action)) {
return `编辑员 ${user.name} 可以执行 ${action} 操作`;
} else {
return `编辑员 ${user.name} 无法执行 ${action} 操作`;
}
case 'viewer':
// 只允许查看
return action === 'view' ? `查看员 ${user.name} 可以查看` : `查看员无法执行此操作`;
default:
return '未知角色，权限不足';
}
}
// 测试用例
const adminUser = { name: '李明', role: 'admin', isActive: true };
const editorUser = { name: '张伟', role: 'editor', isActive: true };
const viewerUser = { name: '王芳', role: 'viewer', isActive: false };
console.log(checkAccess(adminUser, 'delete')); // 管理员李明可以执行 delete 操作
console.log(checkAccess(editorUser, 'view')); // 编辑员张伟可以执行 view 操作
console.log(checkAccess(viewerUser, 'edit')); // 查看员无法执行此操作
console.log(checkAccess(adminUser, 'unknown')); // 管理员李明可以执行 unknown 操作
注释说明：
- 使用
type Role定义角色的合法取值，防止拼写错误。 switch语句处理角色分支，逻辑清晰。- 在
editor分支中嵌套if判断操作类型，实现细粒度控制。 includes方法用于判断数组中是否包含某个值，是数组常用方法。- 所有返回信息都带有用户和操作名，便于调试和日志追踪。
总结与建议
TypeScript 条件语句不仅是“判断真假”的工具，更是类型安全与逻辑清晰的结合体。从最基础的 if...else 到 switch，再到高级的类型守卫，每一种写法都有其适用场景。
- 简单判断用
if...else或三元运算符，代码简洁明了。 - 多分支选择用
switch，结构清晰，易于维护。 - 高级场景中，利用
in、instanceof等类型守卫，让 TypeScript 自动帮你“缩小类型范围”，避免运行时错误。
记住：好的条件语句不是写得越多越好，而是写得越安全、越清晰越好。当你在团队协作时，别人一眼就能看懂你的逻辑，这就是高质量代码的体现。
最后，别忘了——无论你用什么语法，都要确保覆盖所有可能的情况。一个漏掉的 else，可能就是下一个线上事故的导火索。
TypeScript 条件语句，不只是代码，更是思考方式的升级。从今天开始，让你的代码“会判断”，更“懂类型”。