这是我参与「第五届青训营 」伴学笔记创作活动的第 8 天
前言
在上一次的文章中我们介绍了typeScript的发展,以及类型标注的用法。今天让我们继续来学习typeScript。
类型运算
上一节也介绍了类型运算符|,这次我们也介绍一下类型运算符&
type dataType1 = string | number
type dataType2 = string | null
type dataType3 = dataType1 & dataType2 //得到string类型
没有什么需要过多介绍的,这使我们处理类型更加灵活。
类型断言
在一些时候,当我们根据代码上下文能够确信变量的数据类型与我们预计的一致时,但typeScript也许并不知道,这时它仍然会报错,对于这种情况,我们可以使用类型断言来解决它。
设想,我们有一个class属于为box的div容器,并且只有div容器的class为box
const div = document.querySelector('.box') as HTMLDivElement
此时typeScript根据querySelector的定义只能得出div变量类型为HTMLElement,虽然该HTMLElement作为HTMLDivElement的父类型能够用多态的形式接收,但该类型对我们调用一些div元素独有的方法产生了障碍,typeScript并不会按照div元素的方法检查div变量。这时,我们确信div的数据类型,就是类型断言发挥作用了。
interface接口
说起多态,学过Java的读者应该非常熟悉,那么接口自然必不可少。
interface DataType {
data: string[]
num?: number
}
在这个接口中,我们定义了一个字符串数组data和数字类型num。在接口中,我们不声明权限时即public,同时我们也可以使用private声明私有成员。值得注意,num后带有?,意为num的数据类型为number | undefined而非number,这也是typeScript的特色,?也能在表达式中使用。
const arr: number[] | undefined = undefined
console.log(arr?.map(item => item))//输出undefined
console.log(arr!.map(item => item))//报undefined错误
在变量可能为undefined时,从其获取成员会导致错误,使用?会及时停止在undefined处,增强代码健壮性。但我们也可以使用!表示我们确信变量一定存在,typeScript便停止检查,!是把双刃剑,需谨慎使用。
我们也能够在interface中使用索引,例如
interface DataType {
[string]: number
}
这时在访问时我们不仅可以使用.也能够使用[]进行访问,接口的定义规范了对象的类型和访问方法。
总结
本次继续深入了typeScript,描述了许多实际的应用场景,让我们对typeScript强大的类型检查功能有了更加深入的了解。