14.typescript筆記_交叉類型和聯合類型

1.1 交叉類型

interface DonInterface {
    run():void;
}
interface CatInterface {
    jump():void;
}
//這裏的pet將兩個類型合併,所以pet必須保護兩個類型所定義的方法
let pet : DonInterface & CatInterface = {
    run:function(){},
    jump:function(){}
}

1.2 聯合類型

let a : number | string = "a";
let b : "a" |  "b" | "c";
let c : 1 | 2 | 3;
b = "a";
// b = 1;報錯
class Dog implements CatInterface{
    jump(){}
    run(){}
}

class Cat implements CatInterface{
    jump(){}
    eat(){}
}

enum Master { Boy , Girl};
function getPet(master : Master){
    let pet = master === Master.Boy ? new Dog() : new Cat();
    //只能訪問公有方法
    pet.jump();
    return pet;
}

1.3 可區分的聯合類型
結合了聯合類型和字面量類型的方法
核心思想,一個類型如果是多個類型的聯合類型,並且每個類型都有一個公共的屬性,那麼我們可以拼接這個公共的屬性,創建類型的保護區塊

interface Square {
    kind : "square";
    size : number;
}
interface Reactngle {
    kind : "reactngle";
    width:number;
    height:number;
}

type Shape = Square | Reactngle | Circle;
function area(s:Shape){
    switch (s.kind) {
        case "square" :
            return s.size * s.size;
            break;
        case "reactngle" :
            return s.width * s.height;
            break;
    }
}

此時我們將代碼升級,模擬場景,後續可能會新增一個類型

interface Circle {
    kind : "circle";
    r : number;
}

但是有個問題,當我們使用這個函數時,傳入了Circle類型的參數,會返回undefined
如果避免這種問題呢,讓編譯器可以提前識別出錯誤
可以給這個函數取一個返回值
可以給這個函數中定義一個default,這樣可以限定,每次我定義一個新的類型,就要加一個case
原理是, 當我們定義了新的類型時, 且加入到type中去, 傳入的參數s如果不是never類型,那證明前面的case有遺漏,進行報錯提醒
只有當type不存在的類型時, 傳入的參數會進行err拋出報錯

/**
 * default :
 return ( (e : never ) => { throw new Error(e)} )(s)
 * */

修改過後的代碼

interface Square {
    kind : "square";
    size : number;
}
interface Reactngle {
    kind : "reactngle";
    width:number;
    height:number;
}

type Shape = Square | Reactngle | Circle;
function area(s:Shape){
    switch (s.kind) {
        case "square" :
            return s.size * s.size;
            break;
        case "reactngle" :
            return s.width * s.height;
            break;
            default :
                return ( (e : never ) => { throw new Error(e)} )(s)
    
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章