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