共计 1790 个字符，预计需要花费 5 分钟才能阅读完成。
前言
在初步学习了 TypeScript 的变量申明后，对它的动态类型查看性能几乎是爱不释手，但同时也发现一个问题：在失常的开发中，一个变量的类型有时可能不仅仅只限于 number 或者 string 中的一种，有可能是两种类型或者更多，比方：
// index.js
let res;
if(userInfo.age && userInfo.age > 12){res = userInfo.age;}else{res = userInfo.name;}下面例子中的 res 类型可能是 number，也可能是 string。
到底该怎么限度 res 的类型，让它同时满足 number 和 string 的类型查看呢？这就波及到咱们明天要学的 TypeScript 的另一种类型申明——联结类型。
对于联结类型
从字面意思来看，所谓“联结类型”其实就是多种类型的联结，也就是不仅仅一种类型。
联结类型（Union Types）能够通过管道 (|) 给变量设置多种类型，赋值时能够依据设置的类型来赋值。
根本语法如下：
let tag:Type1|Type2|Type3 其中应用“|”分隔的三种类型代表变量 tag 可被赋值的类型范畴。
留神：对于指定了联结类型的变量，其值的类型必须只能是联结类型中蕴含的某一种，如果取了联结类型之外的类型值，在编译过程中会报错。
指定了联结类型的变量能够在运行过程中被赋予联结类型中的任一类型值。
理论应用示例
以下是联结类型的几种理论利用举例。
申明变量
let res: number | string; // 联结类型申明
if (userInfo.age > 12) {res = userInfo.age;} else {res = userInfo.name;}
return res;上例中的 res 只能赋值为 number 类型或 string 类型，赋值其它类型会产生报错。
函数传参
咱们在函数传参中也能够应用联结类型来控制参数的预期类型：
function sayRes(res: number | string){console.log(res);
}
sayRes(true); // Error: 类型“boolean”的参数不能赋给类型“string | number”的参数。联结类型数组
对于可能由不同繁多类型元素组成的数组申明，咱们也能够应用联结类型进行申明。
let arr5: number[] | string[];
arr5[0] = true; // Error: 不能将类型“boolean”调配给类型“string | number”。扩大常识
针对联结类型的数据，次要扩大以下几点。
只能拜访共有属性或办法
个别状况下，应用联结类型是因为不能确定变量最终值的类型。
对于联结类型的变量或参数，如果不能确定其具体类型的时候，只能拜访联结类型中所有类型共有的属性或办法，若拜访某一类型独有的属性或办法，会产生报错。
function sayRes(res: number | string) {if (res.length > 0) {// Error: 类型“number”上不存在属性“length”。}
}当 res 为 number 类型时，是不存在 .length 属性的，所以会报错。
上面这个例子中，因为 .toString() 是 number 和 string 类型共有的办法，所以可失常编译：
function sayRes(res: number | string) {if (res.toString() === "12") {}}类型推断
对于联结类型变量，在赋值后会依据值的类型推断该变量的类型。
let res :number | string;
res = "编程三昧";
console.log(res.length);
res = 12;
console.log(res.length); // Error: 类型“number”上不存在属性“length”。在给 res 赋值为 12 后，TypeScript 推断 res 的类型为 number，number 类型不存在 .length 属性，所以报错。
总结
以上就是 TypeScript 联结类型的相干常识，总结起来就是：
- 联结类型蕴含了变量可能的所有类型；
- 对联结类型变量赋值为联结类型之外的值，会产生报错；
- 在不能确定联结类型变量的最终类型之前，只能拜访联结类型所共有的属性和办法。
~
~ 本文完，感激浏览！
~
学习乏味的常识，结识乏味的敌人，塑造乏味的灵魂！
大家好，我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢送关注，心愿大家多多指教！
