TypeScript 条件语句

TypeScript 条件语句详解

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

1. if / else if / else

基本语法：

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

示例 + 类型缩小演示：

letvalue:string|number="Hello";if(typeofvalue==="string"){// 这里 TS 知道 value 是 stringconsole.log(value.toUpperCase());// 安全调用字符串方法console.log(value.length);// OK}else{// 这里 TS 知道 value 是 numberconsole.log(value.toFixed(2));// 安全调用数字方法}// 另一个常见场景：处理 null / undefinedfunctiongreet(name:string|null){if(name===null){console.log("Hello, Guest!");}else{// 这里 name 被缩小为 stringconsole.log(`Hello,${name.toUpperCase()}`);}}

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

语法：

condition?exprIfTrue:exprIfFalse

示例：

letage:number=20;letstatus:string=age>=18?"成人":"未成年";console.log(status);// "成人"// 嵌套三元（不推荐过多嵌套，可读性差）letcategory=age<13?"儿童":age<18?"青少年":"成人";

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

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

3. switch 语句

语法：

switch(expression){casevalue1:// 代码break;casevalue2:// 代码break;default:// 代码}

示例：

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

TS 优势：

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

functionhandleStatus(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

示例：

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

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

if(username!==""&&username!==undefined){...}// 或使用空值合并letdisplayName=username??"默认用户";

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

a. 类型守卫（Type Guards）

functionisString(value:any):valueisstring{returntypeofvalue==="string";}functionprocess(value:string|number){if(isString(value)){// value 被缩小为 stringvalue.toUpperCase();}else{value.toFixed();}}

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

interfaceCircle{kind:"circle";radius:number;}interfaceSquare{kind:"square";side:number;}typeShape=Circle|Square;functiongetArea(shape:Shape):number{switch(shape.kind){case"circle":returnMath.PI*shape.radius**2;case"square":returnshape.side**2;// TS 保证所有 kind 都被覆盖}}

最佳实践建议

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

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

小结：条件语句速查

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