TypeScript的類型區分能力

• 聯合類型在為推斷出具體類型之前，只能使用其公共部分，有時候這會為開發者帶來很多麻煩，例如：

class Color{
    color:string
    constructor(color:string){
        this.color = color
    }
}
class Shape {
    size:number
    constructor(size:number){
        this.size = size
    }
}
function getObj(type): Color | Shape {
    if (type == 0) {
        return new Color('red')
    }else{
        return new Shape(30);
    }
}
var obj1:Color | Shape = getObj(1);
console.log(obj1.size);  //此處會編譯異常，無法使用size
obj1 = getObj(0);
console.log(obj.color);  //此處會編譯異常，無法使用color

• 在上面這段程式中，雖然我們知道obj1物件的類型，但TypeScript的編譯器無法明確推斷出來，這會導致屬性無法正常使用。
• 雖然可以透過強制斷言來告訴編譯器正確類型，但以未來的可維護性而言，使用太多斷言會把原本編譯器的工作轉移到開發者身上，這樣在進行維護改動時，會帶來一定的風險。
• 對此TypeScrip提供了幾種方法來幫助開發者進行類型區分，有typeof和instanceof來輔助類型推斷，或是自訂類型推斷方法。

//基本資料類型使用typeof
function stringOrNumber(p:string | number){
    if(typeof p === 'string'){
        //此時編譯器將p推斷為string類型
        console.log(p.length);
    }else {
        //被推斷為number類型
        console.log(p / 2);
    }
}
//class類型使用instanceof
function colorOrShape(p:Color | Shape){
    if(p instanceof Color){
        //此時會推斷p為Color
        console.log(p.color);
    }else{
        //推斷為Shape
        console.log(p.size);
    }
}
//自訂類型推斷方法
function isColor(p: Color | Shape): p is Color {
    return p["color"] != undefined;
}
function isShape(p: Color | Shape): p is Shape {
    return p["size"] != undefined;
}
function colorOrShape2(p: Color | Shape) {
    if (isColor(p)){
        //此時會被推斷為color類型
        console.log(p.color);
    }
    if (isShape(p)){
        //推斷為shape類型
        console.log(p.size);
    }
}

• 自訂類型推斷方法這段中，isColor和isShape函數傳回的是「類型述詞」，回傳true表示類型述詞成立。
• 類型述詞的語法為p is Type，p需要和函數的參數名稱一樣。

字面量類型與類型態名稱

• 字面量類型可分為「字串字面量類型」與「數值字面量類型」，字面量類型的作用與列舉很相似，它允許指定一些固定的值來定義類型。
• 類型態名稱不會建立一個新的類型，而是為已有的類型定義新的名稱。

今天的內容就先到這邊，明天開始將會介紹Vue。