一、聯(lián)合類型
聯(lián)合類型也可以稱為多選類型，當(dāng)我們希望標(biāo)注一個(gè)變量為多個(gè)類型之一時(shí)可以選擇聯(lián)合類型標(biāo)注，或 的關(guān)系
function css(ele: Element, attr: string, value: string|number) {
// ...
}
let box = document.querySelector('.box');
// document.querySelector 方法返回值就是一個(gè)聯(lián)合類型 string|number
if (box) {
// ts 會(huì)提示有 null 的可能性，加上判斷更嚴(yán)謹(jǐn)
css(box, 'width', '100px');
css(box, 'opacity', 1);
css(box, 'opacity', [1,2]); // 錯(cuò)誤
}
二、交叉類型
交叉類型也可以稱為合并類型，可以把多種類型合并到一起成為一種新的類型，并且 的關(guān)系
對(duì)一個(gè)對(duì)象進(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});
三、字面量類型
有的時(shí)候，我們希望標(biāo)注的不是某個(gè)類型，而是一個(gè)固定值，就可以使用字面量類型，配合聯(lián)合類型會(huì)更有用
function setPosition(ele: Element, direction: 'left' | 'top' | 'right' | 'bottom') {
// ...
}
// ok
box && setDirection(box, 'bottom');
// error
box && setDirection(box, 'other');
四、類型別名
有的時(shí)候類型標(biāo)注比較復(fù)雜，這個(gè)時(shí)候我們可以類型標(biāo)注起一個(gè)相對(duì)簡(jiǎn)單的名字
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自動(dòng)合并，利于擴(kuò)展
type
- 不能重名
- 能描述所有數(shù)據(jù)
七、類型推導(dǎo)
每次都顯式標(biāo)注類型會(huì)比較麻煩，TypeScript 提供了一種更加方便的特性：類型推導(dǎo)。TypeScript 編譯器會(huì)根據(jù)當(dāng)前上下文自動(dòng)的推導(dǎo)出對(duì)應(yīng)的類型標(biāo)注，這個(gè)過程發(fā)生在：
- 初始化變量
- 設(shè)置函數(shù)默認(rèn)參數(shù)值
- 返回函數(shù)值
// 自動(dòng)推斷 x 為 number類型
let x = 1;
// 不能將string類型"a"分配給number類型
x = 'a';
// 函數(shù)參數(shù)類型、函數(shù)返回值會(huì)根據(jù)對(duì)應(yīng)的默認(rèn)值和返回值進(jìn)行自動(dòng)推斷
function fn(a = 1) {return a * a}
八、類型斷言
有的時(shí)候，我們可能標(biāo)注一個(gè)更加精確的類型（縮小類型標(biāo)注范圍），比如：
let img = document.querySelector('#img');
我們可以看到 img 的類型為 Element，而 Element 類型其實(shí)只是元素類型的通用類型，如果我們?nèi)ピL問 src 這個(gè)屬性是有問題的，我們需要把它的類型標(biāo)注得更為精確：HTMLImageElement 類型，這個(gè)時(shí)候，我們就可以使用類型斷言，它類似于一種 類型轉(zhuǎn)換：
let img = <HTMLImageElement>document.querySelector('#img');
或者
let img = document.querySelector('#img') as HTMLImageElement;
注意：斷言只是一種預(yù)判，并不會(huì)數(shù)據(jù)本身產(chǎn)生實(shí)際的作用，即：類似轉(zhuǎn)換，但并非真的轉(zhuǎn)換了
文章每周持續(xù)更新，可以微信搜索「 前端大集錦 」第一時(shí)間閱讀，回復(fù)【視頻】【書籍】領(lǐng)取200G視頻資料和30本PDF書籍資料
