TypeScript 联合类型&类型断言

联合类型

联合类型就是类型的“或”操作。

我们来看这个例子：

let seven: number;

seven = 7;

seven = 'Seven'; // 会报错，报错信息：不能将类型“Seven”分配给类型“number”

上面代码会报错。当然我们将它改成 any 类型，但是更好的方式是使用联合类型

let seven: number | string;

seven = 7;

seven = 'Seven'; 

使用联合类型的话，只能访问两个类型共有的属性和方法，看下图。

习题：为变量 animal 声明合适的联合类型

let animal: _____;
animal = 'panda';
animal = 10;
animal.valueOf(0);

A. number | string

B. number | undefined

C. string | undefined

D. undefined | null

解析

我们需要对 animal 声明合适的变量，我们先来分析下面的运算：

animal = 'panda';
animal = 10;

这两步运算需要 animal 声明为 string 或者 number。

animal.valueOf();

valueOf 方法是 string，number，boolean 共有的。故选 A。

类型断言

类型断言，就是断定它一定是这个类型。

我们来看下这个例子：

let seven: number | string;

seven.toFixed(3);

seven.length;

seven.toString();

目前运行上面代码，会报错，看看报错信息。那我们改写代码，让其不报错呢？

可以使用 as 进行类型断言。

let seven: number | string;

(seven as number).toFixed(3);
// 断言成 string 类型
(seven as string).length;

seven.toString();

习题：关于类型断言，下面描述错误的是？

A. 类型断言可以将一个联合类型的变量，指定为一个更加具体的类型

B. 不能将联合类型断言为不存在的类型

C. 类型断言是一种类型转换。

TypeScript 的类型系统是辅助工具，不会左右我们代码的逻辑，只会尽力的反馈类型给我们，所以类型系统不是一种类型转化。故选 C。

资料：类型断言的两种语法

在之前的学习中我们已经知道如何通过类型断言来预判值的类型，从而访问其属性，我们来看如下代码。

let seven: number | string;

(seven as number).toFixed(3); // 类型断言的第一种语法

<string>seven.length; // 类型断言的第二种语法

上述代码都能通过编译，因为他们都是符合规范的类型断言语法。

这里有一点需要注意，如果在 TypeScript 里面写 JSX 代码，是不能使用 <string>seven.length 来进行断言的，因为此时的 < > 会被识别为 JSX 语法。

资料：断言成 any 类型

看到标题可能很多同学会有疑问，为什么要断言为 any 类型？之前不是说要尽量让类型明确吗。

其实这里并不冲突，为了让代码清晰便于阅读，在使用TypeScript 开发的过程中我们一定要尽量避免声明 any 类型。但是在实际的开发过程中，难免遇到某些场景使得 TypeScript 无法编译通过，这里例举以下两个场景。

方法被调用的时候，实际传入的参数有可能是一个更加具体的值

我们来看如下代码：

function handler (e: Event) {
    let touchEvent = e as TouchEvent;
}

上方代码可以通过编译，但是如下代码却会报错

function handler (e: Event) {
    let $element = e as HTMLElement; // 类型“Event”不可转换为类型“HTMLElement”。类型“Event”中缺少属性“accessKey”。
}

这里我们期望的 $element 是一个 DOM 元素，所以 TS 会尝试去访问 e 是否存在 DOM 元素所必须有的属性，第一个访问的就是 accessKey 属性，因为这里的 e 是 Event 类型，发现访问不到，就会提示错误。

这时如果我们需要强行声明，我们可能就需要 将值断言为 any，类似如下代码：

function handler (e: Event) {
    let $element = e as any as HTMLElement; // 双重断言
}

这里也可以理解为进行了双重断言，最终通过编译。

引入第三方库，造成无法通过编译

假设一个场景，我们引入了一个较老版本的 html2canvas 库，其在 windows 对象上绑定了 html2canvas 函数，我们的用法可能是如下代码：

import './html2canvas';

let $element = document.body;

window.html2canvas($element, canvas => {
    console.log(canvas.toDataURL());
}); // 类型“Window”上不存在属性“html2canvas”

这时候我们可以将 window 断言为 any 类型来避免编译不通过

import './html2canvas';

let $element = document.body;

(window as any).html2canvas($element, canvas=>{
    console.log(canvas.toDataURL());
});