TypeScript实例讲解（八）
本篇内容：TypeScript 联合类型和类型保护。 复制代码
联合类型
联合类型（Union Types）表示取值可以为多种类型中的其中一种，联合类型使用 | 分隔每个类型。之前的例子中已经用到过联合类型，这里单独详细讲解一下。
// 例 1 // 定义一个变量 let myNumber: number | string; myNumber = 10; myNumber = 'ten'; 复制代码
例1中变量 myNumber 使用了联合类型，它的类型可以是 number 或 string 两种类型。
// 例 2 // 声明 interface interface Teacher { name: string; profession: 'teacher'; teach: () => {}; } interface Dancer { name: string; profession: 'dancer'; dance: () => {}; } function work(person: Teacher | Dancer) { person.name // 正常 person.teach(); // 报错 person.dance(); // 报错 } 复制代码例2中声明了两个 interface，Teacher 和 Dancer，函数 work() 的参数使用了联合类型。我们发现当使用了联合类型后可以正常使用 name 属性，而使用 teach() 或者 dance()方法就会报错，这是为什么？
因为 name 属性是Teacher 和 Dancer 接口共有的属性，而 teach() 或者 dance()方法却是 Teacher 或 Dancer 接口独有的方法，无法保证在函数 work() 上一定存在。
可以看出联合类型就可能会出现上面的问题。为了避免这些问题，保证代码的严谨性，我们需要做类型保护。有很多方法都可以实现类型保护，我们举两个常用的例子。
类型保护
方法一：通过类型断言的方式实现类型保护
// 例 3 function work(person: Teacher | Dancer) { if (person.profession === 'teacher') { // 如果person的职业是教师，我们就通过断言的方式告诉TypeScript person就是教师 (person as Teacher).teach() } else { (person as Dancer).dance() } } 复制代码方法二：通过 in 语法实现类型保护
// 例 4 function work(person: Teacher | Dancer) { // 我们判断person里面有teach这个方法我们再调用teach方法 if ('teach' in person) { person.teach(); } else { person.dance(); } } 复制代码例3和例4中因为 work() 函数的参数类型只有 Teacher 和 Dancer 两个类型，所以上面可以直接写 else，可以看出 TypeScript 还是比较智能的。
还可以通过 typeof 语法、instanceof 语法等方法实现类型保护，这里就不再举例了。
本篇完！如果文章对你有一点点帮助，请记得点个赞哦。
作者：名字刚好七个字
链接：https://juejin.cn/post/7028028963335176222