企业官网建设流程全解析

wordpress 中英文站点,南昌网站建设工作室,WordPress按钮跳转插件,动漫制作专业名人TypeScript 中的联合类型#xff08;Union Types#xff09;详解 联合类型 是 TypeScript 类型系统中最强大的特性之一#xff0c;使用 |#xff08;竖线#xff09;将多个类型组合起来#xff0c;表示一个值可以是几种类型中的任意一种。 1. 基本语法与用法 let id: …TypeScript 中的联合类型Union Types详解联合类型是 TypeScript 类型系统中最强大的特性之一使用|竖线将多个类型组合起来表示一个值可以是几种类型中的任意一种。1. 基本语法与用法letid:string|number123;// 可以是 string 或 numberidabc123;// OK// id true; // 错误boolean 不属于联合类型常见基础联合类型letflag:boolean|nulltrue;flagnull;// OKletstatus:loading|success|errorloading;statussuccess;// OK// status failed; // 错误不是这三个值之一2. 类型缩小Type Narrowing—— 联合类型的核心优势TypeScript 会根据条件判断自动缩小变量的类型范围提供更精确的类型检查和智能提示。functionprintId(id:string|number){// 这里 id 是 string | numberif(typeofidstring){// TS 自动缩小这里 id 是 stringconsole.log(id.toUpperCase());// 安全调用字符串方法console.log(id.length);}else{// TS 自动缩小这里 id 是 numberconsole.log(id.toFixed(2));// 安全调用数字方法}}printId(123);// 调用数字分支printId(hello);// 调用字符串分支其他常见类型守卫Type Guards方式functionprocess(value:string|null|number){if(valuenull){// value 被缩小为 nullreturn;}if(typeofvaluestring){// value 被缩小为 stringvalue.toLowerCase();}else{// value 被缩小为 numbervalue.toPrecision(2);}}typeof检查原始类型string/number/boolean/symbol/function/!检查字面量或 null/undefined自定义类型守卫函数functionisString(value:any):valueisstring{returntypeofvaluestring;}functionlog(value:string|number){if(isString(value)){// value 被缩小为 stringconsole.log(value.repeat(2));}}3. 与其他类型的组合a. 联合类型 数组letmixedArray:(string|number)[][1,two,3,four];mixedArray.push(5);// OKmixedArray.push(six);// OK// mixedArray.push(true); // 错误b. 联合类型 对象属性interfaceSuccess{type:success;data:string;}interfaceError{type:error;message:string;}typeResultSuccess|Error;// 可辨识联合Discriminated UnionfunctionhandleResult(result:Result){if(result.typesuccess){// result 被缩小为 Successconsole.log(result.data.toUpperCase());}else{// result 被缩小为 Errorconsole.log(错误result.message);}}可辨识联合是联合类型的最佳实践模式通过一个共同的字面量属性tag如type、kind来区分不同分支。4. 联合类型与函数// 参数为联合类型functionformat(value:string|number):string{returntypeofvaluenumber?value.toFixed(2):value.trim();}// 返回值为联合类型functiongetStatus():ok|failed|null{returnMath.random()0.5?ok:failed;}5. 常见内置联合类型string | null | undefined常用于可选值开启strictNullChecks时HTMLElement | null如document.getElementById()any可以看作是所有类型的联合但不推荐使用6. 注意事项联合类型的方法限制只能调用所有类型共有的方法。letvalue:string|numberhello;// value.toUpperCase(); // 错误number 上没有这个方法value.toString();// OKstring 和 number 都有 toString()使用类型守卫来安全访问特定类型的方法。7. 最佳实践建议场景推荐用法可能为空的值string状态机“idle”API 响应可辨识联合带type或kind字段多类型参数联合类型 类型守卫函数避免过度宽松尽量用具体字面量联合而不是 string小结联合类型速查写法含义示例场景stringnumberID 可以是字符串或数字“left”“right”“center”SuccessError可辨识联合Tnullundefined联合类型是 TypeScript 类型安全的核心配合类型缩小和可辨识联合能大幅减少运行时错误提升代码可维护性。如果您想深入了解交叉类型Intersection Types、联合类型与泛型的结合、或条件类型Conditional Types请告诉我