一、聯(lián)合類型

聯(lián)合類型也可以稱為多選類型，當(dāng)我們希望標(biāo)注一個變量為多個類型之一時可以選擇聯(lián)合類型標(biāo)注，或 的關(guān)系

function css(ele: Element, attr: string, value: string|number) {
    // ...
}

let box = document.querySelector('.box');
// document.querySelector 方法返回值就是一個聯(lián)合類型 string|number
if (box) {
    // ts 會提示有 null 的可能性，加上判斷更嚴(yán)謹(jǐn)
    css(box, 'width', '100px');
    css(box, 'opacity', 1);
    css(box, 'opacity', [1,2]);  // 錯誤
}

二、交叉類型

交叉類型也可以稱為合并類型，可以把多種類型合并到一起成為一種新的類型，并且 的關(guān)系

對一個對象進(jìn)行擴(kuò)展：

interface o1 {x: number, y: string};
interface o2 {z: number};

let newObj: o1 & o2 = Object.assign({}, {x:1,y:'2'}, {z: 100});

三、字面量類型

有的時候，我們希望標(biāo)注的不是某個類型，而是一個固定值，就可以使用字面量類型，配合聯(lián)合類型會更有用

function setPosition(ele: Element, direction: 'left' | 'top' | 'right' | 'bottom') {
    // ...
}

// ok
box && setDirection(box, 'bottom');
// error
box && setDirection(box, 'other');

四、類型別名

有的時候類型標(biāo)注比較復(fù)雜，這個時候我們可以類型標(biāo)注起一個相對簡單的名字

type dir = 'left' | 'top' | 'right' | 'bottom';
function setPosition(ele: Element, direction: dir) {
    // ...
}

五、使用類型別名定義函數(shù)類型

這里需要注意一下，如果使用 type 來定義函數(shù)類型，和接口有點(diǎn)不太相同

type callback = (a: string) => string;
let fn: callback = function(a) {};

// 或者直接
let fn: (a: string) => string = function(a) {}

六、interface 與 type 的區(qū)別

interface

• 只能描述 object/class/function 的類型
• 同名 interface 自動合并，利于擴(kuò)展

type

• 不能重名
• 能描述所有數(shù)據(jù)

七、類型推導(dǎo)

每次都顯式標(biāo)注類型會比較麻煩，TypeScript 提供了一種更加方便的特性：類型推導(dǎo)。TypeScript 編譯器會根據(jù)當(dāng)前上下文自動的推導(dǎo)出對應(yīng)的類型標(biāo)注，這個過程發(fā)生在：

• 初始化變量
• 設(shè)置函數(shù)默認(rèn)參數(shù)值
• 返回函數(shù)值

// 自動推斷 x 為 number類型
let x = 1;
// 不能將string類型"a"分配給number類型
x = 'a';

// 函數(shù)參數(shù)類型、函數(shù)返回值會根據(jù)對應(yīng)的默認(rèn)值和返回值進(jìn)行自動推斷
function fn(a = 1) {return a * a}

八、類型斷言

有的時候，我們可能標(biāo)注一個更加精確的類型（縮小類型標(biāo)注范圍），比如：

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

我們可以看到 img 的類型為 Element，而 Element 類型其實(shí)只是元素類型的通用類型，如果我們?nèi)ピL問 src 這個屬性是有問題的，我們需要把它的類型標(biāo)注得更為精確：HTMLImageElement 類型，這個時候，我們就可以使用類型斷言，它類似于一種 類型轉(zhuǎn)換：

let img = <HTMLImageElement>document.querySelector('#img');

或者

let img = document.querySelector('#img') as HTMLImageElement;

注意：斷言只是一種預(yù)判，并不會數(shù)據(jù)本身產(chǎn)生實(shí)際的作用，即：類似轉(zhuǎn)換，但并非真的轉(zhuǎn)換了

文章每周持續(xù)更新，可以微信搜索「 前端大集錦 」第一時間閱讀，回復(fù)【視頻】【書籍】領(lǐng)取200G視頻資料和30本PDF書籍資料