typeScript 高级类型
2022-01-01 本文已影响0人
DeadMoon
所谓高级类型,是typescript为了保证语言的灵活性,对类型进行一些操作。这些特性有助于我们应对复杂多变的开发场景
- 交叉类型
交叉类型是将多个类型合并为一个类型。可以通过 & 来实现合并,生成的新类型包含了所需的所有类型的特性
看下面这个例子:
以上需要注意的是, 如果两个接口存在同属性,但是类型不一致的话, 新的类型将无法赋值// 我有一个Person 接口, 还有一个 Action 接口, 现在需要一个接口同时有他们共有属性, 我要怎么操作呢?新的接口完全可以将前两个接口属性重新再描述一遍, 更高级的写法是使用交叉类型 interface Person { name: string age: number } interface Action { coding():void } const staff: Person & Action = { name: 'xiaohong', age: 20, coding(){ console.log('我 12 点还在写代码!!!!!!') } } //
- 联合类型
联合类型可以通过管道将变量设置多种类型,赋值时可以根据设置的类型来赋值。也就是说联合类型的变量可以是指定的几种数据类型中的一种,我们可以通过竖线 | 来分隔不同的类型。// 想获取一个变量的长度, 这个变量可能是数组,也可能是字符串,我们就可以这样去写 function getLen<T>(arg: string | T[]) { return arg.length } getLens('hello world') getLen<number>([1,2,3])
- 类型别名
以上两种类型如果在多处使用的话, 会不会显得太麻烦, 类型别名就是为了将这种复杂的类型重新声明为一个新类型
// 交叉类型
type Staff = Person & Action
const staff: Staff = {
name: 'xiaohong',
age: 20,
coding(){
console.log('我 12 点还在写代码!!!!!!')
}
}
// 联合类型
type mustLens = string | number[]
const getLens = function (arg: mustLens) {
return arg.length
}
getLens('1111')
- 类型保护与区分类型
联合守卫的作用在于触发类型缩小, 用来区分类型集合中不同成员
如何区分类型const toUpperCase = (stringOrArray: string | string[]) => { if (typeof stringOrArray === 'string') { return stringOrArray.toUpperCase() } else { return stringOrArray.map(el => el.toUpperCase()) } }
- switch
const convert = (c: 'a' | 1) => { switch (c) { case 1: return c.toFixed(); // c is I case 'a': return c.toLowerCase(); // c is 'a' } }
- typeof
同 javascript 必须是 "number", "string", "boolean"或 "symbol" - instanceof
instanceof的右侧要求是一个构造函数