TypeScript实战-12-TS的类型检查机制-类型推断

一,前言

前面的例子中,已经多少接触了TS的类型检查机制,
例如可以利用TS自动推断出返回值类型省略返回值类型的书写

---

二,TS类型检查机制

类型检查机制:

TypeScript编译器在做类型检查时,使用的原则和表现的行为

类型检查机制的作用:

辅助开发,提高开发效率

TS类型检查机制包含:

1)类型推断
2)类型兼容性
3)类型保护

---

三,类型推断

不需要指定变量类型或函数的返回值类型,TypeScript可以根据某些规则自动推断出其类型

类型推断包括:

1)基础类型推断
2)最佳通用类型推断
3)上下文类型推断

---

四,基础类型推断

基础类型推断是最常见的类型推断,通常发生在以下场景:

1)直接声明一个变量时

let test

不对其类型进行指定,TS会自动推断为any类型

为这个变量赋值为1,则会被推断为number类型

---

2)设置函数默认参数时

定义一个函数test,指定默认参数x值为1,此时x会被推断为number类型

let test = (x = 1) => {}

---

3)确定函数返回值时

let test = (x = 1) => x + 1

此时test的类型被推断为number:

---

五,最佳通用类型推断

当需要从多个类型推断出一个类型时,TS会尽可能推断出一个兼容当前所有类型的通用类型

声明一个数组,包含number和null元素

let array = [1, null] 

由于number和null是不兼容的,所以此时数组被推断为number和null的联合类型

决定number和null是否兼容的设置,在tsconfig.json中的strictNullChecks.默认true

...
// "strictNullChecks": true,              /* Enable strict null checks. */
...

改为false后,重新查看ts的类型推断结果:

...
"strictNullChecks": false,              /* Enable strict null checks. */
...

---

五,上下文推断

前两种TS类型推断都是从右向左进行推断(根据表达式右侧的值推断表达式左侧变量的类型)

TS还有一种从左向右的上下文类型推断,通常会发生在一个事件处理中:

例如,为window绑定onkeydown事件,参数为event:

event会根据window.onkeydown被推断为KeyboardEvent

// 上下文推断
window.onkeydown = (event) => {  // KeyboardEvent

}

---

六,类型断言

TS的类型推断并不是万能的,有时候会出现与预期不符的情况
这时,TS提供了覆盖TS的推断的方法,就是类型断言

定义一个空对象foo,然后再指定一个bar属性,因为空对象上没有bar属性,这时就会报错:

这个问题可以使用类型断言解决:

先定义一个接口,包含number类型的bar属性
再利用类型断言功能将foo指定为一个接口类型

interface Foo {
    bar: number
}
let foo = {} as Foo	// 类型断言
foo.bar = 1

由于类型断言将foo指定为Foo接口类型,代码不再报错

使用类型断言的注意事项:

类型断言可以将某一变量特指为某种类型,但并不会产生接口约束作用

例如,还是将foo函数指定为Foo接口类型,但不进行赋值

interface Foo {
    bar: number
}
let foo = {} as Foo
// foo.bar = 1	不进行赋值

那么此时,问题来了:

foo被指定为Foo接口类型,但真实的foo是一个空对象,
不做foo.bar = 1相当于没有bar属性,所以此时的接口并不能起到约束作用

为了解决这个问题:

建议直接在声明的时将对象指定为接口类型,而不使用类型断言

interface Foo {
    bar: number
}

let foo: Foo = {}

这样TS就会给提示缺少一个bar属性

类型断言能够增加代码的灵活性,在改造一些旧代码时非常有效
但使用类型断言要注意避免滥用,需要对上下文环境有充足的预判,
没有任何根据的断言会为代码带来安全隐患

---

七,结尾

本篇介绍了TS类型检查机制有哪些,
重点介绍了类型推断,包括:基础类型推断,最佳通用类型推断,上下文推断
还介绍了类型断言的使用和注意问题