Ts 擴展類型

枚舉類型的擴展

例如我們有一個枚舉類型，但是我們臨時想擴展一個怎么辦呢？

type Fruit = 'Apple' | 'Banana';

const human: {name: string, age: number,  favouriteFruit: Fruit} = {
    name: '張三',
    age: 12,
    favouriteFruit: 'Orange' // Ts會報錯，因為沒有這個類型
}

我們會這樣處理

type Fruit = 'Apple' | 'Banana';

const human: {name: string, age: number, favouriteFruit: Fruit | 'Orange' = {
    name: '張三',
    age: 12,
    favouriteFruit: 'Orange' // Ts就不會報錯了
}

 

如果type想作為一個Object的key呢？

type Fruit = 'Apple' | 'Banana';

const human: {
    name: string, 
    age: number,  
    needFruit: {
        [key in Fruit]?: number
    }
} = {
    name: '張三',
    age: 12,
    needFruit: {
        Apple: 50,
        Orange: 100, // Ts會報錯，因為沒有Organge這個類型
    }
}

我們會這么處理

type Fruit = 'Apple' | 'Banana';

const human: {
    name: string, 
    age: number,  
    needFruit: {
        [key in Fruit | 'Orange']?: number
    }
} = {
    name: '張三',
    age: 12,
    needFruit: {
        Apple: 50,
        Orange: 100, // Ts就不會報錯了
    }
}

 

復合類型的擴展

type Human = {
    name: string,
    age: number
}

const human: Human = {
    name: '張三',
    age: 22,
    gender: 'Male' // Ts報錯，沒有gender這個字段
}

這個時候，我們用到interfance

type Human = {
    name: string,
    age: number
}

interface SuperHuman extends Human {
    gender: string
}

const human: SuperHuman = {
    name: '張三',
    age: 22,
    gender: 'Male' // Ts就不報錯了
}