提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

Ts 扩展类型

扩展 类型 TS
2023-09-14 09:00:16 时间

枚举类型的扩展

例如我们有一个枚举类型，但是我们临时想扩展一个怎么办呢？

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就不报错了
}

 

相关文章