TypeScript实例讲解（八）

玖柒的小窝

修改于 2021-11-08 13:59:20

3200

修改于 2021-11-08 13:59:20

联合类型

联合类型（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 语法等方法实现类型保护，这里就不再举例了。

本文系转载，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

typescript