前言最初学习了TypeScript的变量声明后,对其静态类型检查功能爱不释手,但同时也发现了一个问题:在平时的开发中,avariable有时类型可能不仅限于number或string中的一种,还可能是两种或两种以上,例如://index.jsletres;if(userInfo.age&&userInfo.age>12){res=userInfo.age;}else{res=userInfo.name;}上面例子中的res类型可以是number也可以是string。如何限制res的类型,使其同时满足数字和字符串类型检查?这就涉及到了我们今天要学习的TypeScript的另一种类型声明——联合类型。关于关节类型从字面上看,所谓的“关节类型”其实是多种类型的组合,即不仅仅是一种类型。联合类型(UnionTypes)可以通过管道(|)为变量设置多种类型,赋值时可以根据设置的类型进行赋值。基本语法如下:lettag:Type1|Type2|Type3用“|”分隔的三种类型表示变量标签可以分配的类型范围。注意:对于指定关节类型的变量,其值类型只能是其中一种关节类型。如果使用关节类型以外的值,编译时会报错。指定联合类型的变量在运行过程中可以赋联合类型中的任意类型值。实际使用示例下面是联合类型的几个实际应用示例。声明变量letres:number|细绳;//联合类型声明if(userInfo.age>12){res=userInfo.age;}else{res=userInfo.name;}returnres;上面例子中的res只能赋值如果是数字类型或者字符串类型,赋值其他类型会报错。函数参数传递我们还可以使用联合类型来控制函数参数传递中参数的预期类型:functionsayRes(res:number|string){console.log(res);}sayRes(true);//错误:类型“boolean”不可分配给类型“string|number”的参数。联合类型的数组对于可能由不同单一类型的元素组成的数组声明,我们也可以使用联合类型来声明。让arr5:数字[]|字符串[];arr5[0]=真;//错误:类型'boolean'不可分配给类型'string|数字'。扩展知识针对联合数据,主要扩展以下几点。只能访问公共属性或方法一般情况下,使用联合类型是因为无法确定变量最终值的类型。对于关节类型的变量或参数,如果无法确定具体类型,则只能访问关节类型中所有类型共有的属性或方法。如果访问了某个类型特有的属性或方法,就会报错。functionsayRes(res:number|string){if(res.length>0){//错误:类型“number”上不存在属性“length”。}}当res是number类型时,没有.length属性,所以会报错。下面的例子中,因为.toString()是number和string类型的通用方法,所以可以正常编译:functionsayRes(res:number|string){if(res.toString()==="12"){}}类型推断对于联合类型变量,会根据赋值后的值的类型推断变量的类型。让res:number|字符串;res=“编程”;console.log(res.length);res=12;console.log(res.length);//错误:类型“number”上不存在属性“length”。给res赋值12后,TypeScript推断res的类型是number,number类型不存在.length属性,所以报错。综上所述,以上就是TypeScript联合类型的相关知识。总之,联合类型包含所有可能的变量类型;将关节??类型变量赋给关节类型以外的值将产生错误;如果无法确定联合类型变量的最终类型以前,只能访问联合类型共有的属性和方法。~~本文到此结束,感谢阅读!~学习有趣的知识,认识有趣的朋友,塑造有趣的灵魂!大家好,我是〖编程三昧〗的作者王隐,我的公众号是《编程三昧》,欢迎关注,希望大家多多指教!
