TypeScript学习-第8章：高级类型-育师

TypeScript学习-第8章：高级类型

上一章咱们搞定了泛型这个“类型复用神器”，以为能在TS世界横着走了？可一碰到复杂业务场景就懵了：既要让变量支持多种类型，又要精准区分类型做不同操作；既要合并多个接口的属性，又要避免类型冲突……别急，TS的“高级类型”就是为解决这些“疑难杂症”而生的！它们就像类型界的乐高积木，能通过组合、判断、守卫，拼出适配复杂业务的精准类型。今天咱们就用接地气的方式，吃透这些高级玩法，从此告别“类型写死”和“any兜底”。

一、基础组合：联合类型与交叉类型（类型乐高的加减乘除）

高级类型的入门，从“组合已有类型”开始。联合类型是“多选一”，交叉类型是“全选合并”，二者堪称TS类型组合的“黄金搭档”。

1. 联合类型（Union Type）：我全都要选一个

联合类型用|连接多个类型，表示“变量类型可以是其中任意一种”，就像奶茶店的“加料可选”——珍珠、椰果选一个加，不能都加（想都加？那得看后面的交叉类型）。

// 联合类型：变量可以是string或numbertypeUnionType=string|number;letvalue:UnionType;value="hello";// 合法value=123;// 合法value=true;// 报错：类型“boolean”不能赋值给类型“string | number”

核心痛点解决：之前写函数参数要适配多类型，要么用any摆烂，要么写多个重载，有了联合类型直接一步到位：

// 适配string/number类型的格式化函数functionformatValue(value:string|number):string{if(typeofvalue==="string"){returnvalue.trim();// 字符串专属操作}returnvalue.toFixed(2);// 数字专属操作}

避坑提醒：联合类型的变量，只能访问所有类型的“共有属性/方法”（比如string和number都有toString()），想访问专属属性，必须先做类型判断（后面的类型守卫会讲）。

2. 交叉类型（Intersection Type）：我全都要合并

交叉类型用 & 连接多个类型，表示“合并所有类型的属性”，就像汉堡叠层——面包+牛肉+生菜，组合成一个完整的汉堡，兼具所有部分的特性。

// 基础类型：用户信息、权限信息typeUser={name:string;age:number};typePermission={role:string;hasAuth:boolean};// 交叉类型：合并User和Permission的所有属性typeUserWithPermission=User&Permission;// 必须包含所有合并后的属性constuser:UserWithPermission={name:"张三",age:25,role:"admin",hasAuth:true};

深度用法：交叉类型不仅能合并对象类型，还能处理复杂场景，比如给已有类型“追加属性”：

// 给User类型追加ID属性typeUserWithId=User&{id:number};constuserWithId:UserWithId={id:1,name:"张三",age:25};

⚠️ 注意：如果交叉类型中存在同名属性且类型冲突（比如{ a: string } & { a: number }），最终属性类型会变成never（无法赋值），避免冲突是使用交叉类型的关键。

二、类型守卫：给类型“安检”，精准区分联合类型

联合类型解决了“多类型适配”，但带来了新问题：如何精准判断变量到底是哪种类型，从而安全访问专属属性？这时候就需要“类型守卫”——相当于给类型做“安检”，告诉TS“这个变量现在是这种类型，放心用”。

1. 基础守卫：typeof 与 instanceof

这俩是最常用的“原生守卫”，前者针对基本类型，后者针对引用类型，简单直接。

// 1. typeof守卫：判断基本类型（string/number/boolean等）functionhandleValue(value:string|number){if(typeofvalue==="string"){console.log("字符串长度：",value.length);// 安全访问string专属属性}else{console.log("数字翻倍：",value*2);// 安全访问number专属操作}}// 2. instanceof守卫：判断引用类型（class实例/数组等）classDog{wang(){console.log("汪汪");}}classCat{miao(){console.log("喵喵");}}functionanimalCry(animal:Dog|Cat){if(animalinstanceofDog){animal.wang();// 安全调用Dog专属方法}else{animal.miao();// 安全调用Cat专属方法}}

2. 自定义类型守卫：用 is 关键字“定制安检规则”

当原生守卫不够用（比如判断对象的具体属性），就可以自定义类型守卫，用is关键字告诉TS“满足条件就是这个类型”。

// 定义两个相似对象类型typeAdmin={role:"admin";manage:()=>void};typeUser={role:"user";view:()=>void};// 自定义类型守卫：判断是否为Admin类型functionisAdmin(user:Admin|User):userisAdmin{returnuser.role==="admin";// 核心判断条件}// 使用守卫精准区分类型functionhandleUser(user:Admin|User){if(isAdmin(user)){user.manage();// 安全调用Admin专属方法}else{user.view();// 安全调用User专属方法}}

自定义守卫的核心是“返回布尔值+is类型断言”，让TS能根据条件自动缩小类型范围，是处理复杂联合类型的利器。

三、类型别名进阶：type的“终极组合技”

之前咱们用type定义简单类型，其实它还能和联合、交叉、泛型搭配，玩出复杂的“类型组合拳”，适配各种奇葩业务场景。

// 1. 联合+交叉+泛型：定义通用的“可选合并类型”typeOptionalMerge<T,U>=(T&U)|T|U;// 可以是T、U，或二者合并typeTest=OptionalMerge<{a:number},{b:string}>;constt1:Test={a:1};constt2:Test={b:"hello"};constt3:Test={a:1,b:"hello"};// 2. 类型别名嵌套：拆分复杂类型，提高可读性typeAddress={province:string;city:string};typeUserInfo={name:string;age:number;address:Address;// 嵌套类型别名};

和interface的区别：很多人会混淆type和interface，简单说：interface侧重“定义对象结构”，支持扩展（extends）；type侧重“类型组合/别名”，更灵活（可定义基本类型、联合类型等）。复杂场景下，二者可以配合使用。

四、条件类型：类型界的“三元表达式”

条件类型的语法是T extends U ? X : Y，和JS的三元表达式一模一样，只不过操作的是“类型”而非“值”——如果T类型能赋值给U类型，结果就是X类型，否则是Y类型。

// 基础条件类型：判断T是否为string类型typeIsString<T>=Textendsstring?"yes":"no";typeA=IsString<string>;// "yes"typeB=IsString<number>;// "no"

深度用法：分布式条件类型：当T是联合类型时，条件类型会“遍历”每个类型分别判断，最终返回联合类型，这是TS内置工具类型的核心原理。

// 分布式条件类型：提取联合类型中的string类型typeExtractString<T>=Textendsstring?T:never;typeUnion=string|number|boolean;typeOnlyString=ExtractString<Union>;// string（仅保留string类型）

TS内置的Extract、Exclude、ReturnType等工具类型，本质都是基于条件类型实现的，掌握条件类型就能轻松理解这些内置工具。

五、实战：用高级类型搞定业务复杂场景

学完知识点，咱们用高级类型封装两个常见业务场景，感受“类型精准控制”的快乐。

1. 表单校验：用联合+类型守卫处理多类型字段

表单字段可能是字符串、数字、布尔值，需要根据类型做不同校验规则，用高级类型实现类型安全的校验函数：

// 定义表单字段类型（联合类型）typeFormField=|{type:"string";value:string;maxLength?:number}|{type:"number";value:number;min?:number}|{type:"boolean";value:boolean};// 自定义类型守卫+条件判断，实现类型安全校验functionvalidateField(field:FormField):boolean{switch(field.type){case"string":returnfield.value.length>0&&(field.maxLength?field.value.length<=field.maxLength:true);case"number":returnfield.value>=(field.min||0);case"boolean":returnfield.value;}}// 测试：不同类型字段校验constnameField:FormField={type:"string",value:"张三",maxLength:10};console.log(validateField(nameField));// true

2. 状态管理：用交叉+条件类型处理状态组合

管理页面状态时，可能需要“基础状态+扩展状态”，用交叉类型合并，用条件类型判断状态类型：

// 基础状态typeBaseState={loading:boolean;error:string|null};// 扩展状态：列表状态、详情状态typeListState={data:any[];total:number};typeDetailState={data:Record<string,any>};// 交叉类型：合并基础状态与扩展状态typePageState<T>=BaseState&T;// 条件类型：判断是否为列表状态typeIsListState<T>=TextendsListState?true:false;// 列表页面状态constlistState:PageState<ListState>={loading:false,error:null,data:[],total:0};typeIsList=IsListState<ListState>;// true