typeScript中的高級類型

此篇涉及的內容：

• 聯合類型、交叉類型、字面量類型 來知足更多的標註需求
• 類型別名、類型推導 簡化標註操做
• 類型斷言 的使用

聯合類型

聯合類型也能夠稱爲多選類型，當咱們但願標註一個變量爲多個類型之一時能夠選擇聯合類型標註，或 的關係

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

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

交叉類型

交叉類型也能夠稱爲合併類型，能夠把多種類型合併到一塊兒成爲一種新的類型，而且 的關係

對一個對象進行擴展：

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

let o: o1 & o2 = Object.assign({}, {x:1,y:'2'}, {z: 100});
複製代碼

小技巧

TypeScript 在編譯過程當中只會轉換語法（好比擴展運算符，箭頭函數等語法進行轉換，對於 API 是不會進行轉換的（也不必轉換，而是引入一些擴展庫進行處理的），若是咱們的代碼中使用了 target 中沒有的 API ，則須要手動進行引入，默認狀況下 TypeScript 會根據 target 載入核心的類型庫

target 爲 es5 時: ["dom", "es5", "scripthost"]

target 爲 es6 時: ["dom", "es6", "dom.iterable", "scripthost"]

若是代碼中使用了這些默認載入庫之外的代碼，則能夠經過 lib 選項來進行設置

www.typescriptlang.org/docs/handbo…

字面量類型

有的時候，咱們但願標註的不是某個類型，而是一個固定值，就可使用字面量類型，配合聯合類型會更有用

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

// ok
box && setDirection(box, 'bottom');
// error
box && setDirection(box, 'center');
複製代碼

類型別名

有的時候類型標註比較複雜，這個時候咱們能夠類型標註起一個相對簡單的名字

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

使用類型別名定義函數類型

這裏須要注意一下，若是使用 type 來定義函數類型，和接口有點不太相同

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

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

interface 與 type 的區別

interface

• 只能描述 object/class/function 的類型
• 同名 interface 自動合併，利於擴展

type

• 不能重名
• 能描述全部數據

類型推導

每次都顯式標註類型會比較麻煩，TypeScript 提供了一種更加方便的特性：類型推導。TypeScript 編譯器會根據當前上下文自動的推導出對應的類型標註，這個過程發生在：

• 初始化變量
• 設置函數默認參數值
• 返回函數值

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

// 函數參數類型、函數返回值會根據對應的默認值和返回值進行自動推斷
function fn(a = 1) {return a * a}
複製代碼

類型斷言

有的時候，咱們可能標註一個更加精確的類型（縮小類型標註範圍），好比：

let img = document.querySelector('#img');
複製代碼

咱們能夠看到 img 的類型爲 Element，而 Element 類型其實只是元素類型的通用類型，若是咱們去訪問 src 這個屬性是有問題的，咱們須要把它的類型標註得更爲精確：HTMLImageElement 類型，這個時候，咱們就可使用類型斷言，它相似於一種 類型轉換：

let img = <HTMLImageElement>document.querySelector('#img');
複製代碼

或者

let img = document.querySelector('#img') as HTMLImageElement;
複製代碼

注意：斷言只是一種預判，並不會數據自己產生實際的做用，即：相似轉換，但並不是真的轉換了