TS--从0开始 （四、高级类型）

一、联合类型

function cssChange(ele: HTMLElement, attr: string, value: number | string): void {
    //此处的number|string表示value可以为number类型也可以为string类型

}

let ele = document.getElementsByTagName('div')[0]

cssChange(ele, 'width', '100px')
cssChange(ele, 'opacity', 1)

二、交叉类型

interface t1 {
    x: number
    y: number
}

interface t2 {
    z: number
}
// 相当于合并   是与的关系
let obj: t1 & t2 = Object.assign({}, { x: 1, y: 1 }, { z: 1 })
let obj1: t1 & t2 = { ...{ x: 1, y: 1 }, ...{ z: 1 } }

三、字面量类型

function fun(ele: HTMLElement, position: 'left' | 'right' | 'top' | 'bottom') {
    // 此处的position: 'left' | 'right' | 'top' | 'bottom'即为字面量类型
}

let ele = document.querySelector('div')
if (ele) {
    fun(ele, 'right')
}

四、类型别名

一般配合联合类型、交叉类型或字面量类型使用

// 使用关键字type
type dir = 'left' | 'right' | 'top' | 'bottom'
function fun(ele: HTMLElement, position: dir) {
}

let ele = document.querySelector('div')
if (ele) {
    fun(ele, 'right')
}

使用类型别名定义函数类型

type f = (a: string) => string

let fun: f = function (a): string {
    return '1'
}

interface与type的区别

1.interface

1. 只能描述object/class/function的类型
2. 同名interface自动合并，利于扩展

2.type

1. 不能重名
2. 能描述所有数据

五、类型推导

自动判断当前变量类型

六、类型断言

let ele = document.querySelector('#img')

if (ele) {
    // (<HTMLImageElement>ele).src    方法一  (<HTMLImageElement>ele)

    // (ele as HTMLImageElement).src   方法二  (ele as HTMLImageElement)
}