Typescript - enum

1、基本使用

数字枚举类型，key 和 value 相互映射

enum Status { 
    OFFLINE, 
    ONLINE, 
    DELETED
}
// 编译后的结果
// var Status;
// (function (Status) {
//     Status[Status["OFFLINE"] = 0] = "OFFLINE";
//     Status[Status["ONLINE"] = 1] = "ONLINE";
//     Status[Status["DELETED"] = 2] = "DELETED";
// })(Status || (Status = {}));

// key 和 value 相互映射
console.log(Status)
// {
//     '0': 'OFFLINE',
//     '1': 'ONLINE',
//     '2': 'DELETED',
//     OFFLINE: 0,
//     ONLINE: 1,
//     DELETED: 2
// }

console.log(Status['OFFLINE']) // 0

console.log(Status[0]) // 'OFFLINE'

字符串枚举类型：只映射 key 到 value

enum Status { 
    SUCCESS = 'success', 
    DANGER = 'danger', 
    WARNING = 'warning'
}
// 编译后的结果
// var Status;
// (function (Status) {
//     Status["SUCCESS"] = "success";
//     Status["DANGER"] = "danger";
//     Status["WARNING"] = "warning";
// })(Status || (Status = {}));

// 只映射 key 到 value
console.log(Status)
// { 
//     SUCCESS: 'success', 
//     DANGER: 'danger', 
//     WARNING: 'warning' 
// }

console.log(Status['SUCCESS']) // success

console.log(Status['success']) // undefined

2、字符串枚举操作

enum Status {
    SUCCESS = 'success',
    DANGER = 'danger',
    WARNING = 'warning',
}

获取枚举的 key 类型

type StatusKey = keyof typeof Status; // 'SUCCESS' | 'DANGER' | 'WARNING'

const keyArr: StatusKey[] = ['SUCCESS', 'DANGER']; // passed

获取枚举的 value 类型

type StatusVal = `${Status}`; // 'success' | 'danger' | 'warning'

const valArr: StatusVal[] = ['success', 'danger', 'warning'];  // passed

合并枚举类型

enum Wait {
    WAITING = 'waiting',
}

const merge = { ...Status, ...Wait };
type MergeStatus = typeof merge;

const s1 = MergeStatus.WAITING; // warning
const s2 = MergeStatus.SUCCESS; // success
const s3 = MergeStatus.DANGER; // danger
const s4 = MergeStatus.WARNING; // warning

 使用 Exclude 剔除枚举中的值

type ErrStatus = Exclude<Status, Status.SUCCESS>;

let a: ErrStatus = Status.DANGER; // passed
a = Status.WARNING;  // passed
a = Status.SUCCESS;  // error

3、作为接口使用

变量中使用

enum CardinalDirection {
    North = 'N',
    East = 'E',
    South = 'S',
    West = 'W'
};

// 1、字符串枚举类型，'变量值' 只能为 '枚举的成员之一' , 否则会报错
// 2、使用 as 关键字也可以
// 3、如果是数字枚举类型，'变量值' 可以设置为数字
const direction: CardinalDirection = 'N' as CardinalDirection;
const direction: CardinalDirection = CardinalDirection.North;
console.log(direction) // 'N'

接口中使用

// 字符串枚举类型
enum CardinalDirection {
    North = 'N',
    East = 'E',
    South = 'S',
    West = 'W'
};

interface Person {
    sex:string;
    direaction:CardinalDirection; // 枚举类型表述属性值
    eate:string;
}

// 模拟后台返回的数据
const respondData = [
    {sex:'男',direaction:'N',eate:'苹果'},
    {sex:'女',direaction:'E',eate:'猕猴桃'},
    {sex:'女',direaction:'W',eate:'芒果'},
]

const arr:Person = respondData.map((item:Person) => {
    return item
})

console.log('arr', arr)

作为动态key

enum Person {
    xiaomimg = 'ming',
    xiaogang = 'gang',
    xiaowang = 'wang',
}

type TypePerson<Enum extends string = Person> = {
  [key in Enum]?: {
      cname: string;
      age: number
  };
}

// 模拟后台返回的数据
const respondData = [
    {ename:'ming',cname:'小明',age:16},
    {ename:'gang',cname:'小刚',age:18},
    {ename:'wang',cname:'小王',age:15}
]

const persons:TypePerson = {}

respondData.forEach((detail) => {
    persons[detail.ename as Person] = {
        cname: detail.cname,
        age: detail.age
    }
})

console.log('persons', persons)
// {
//   ming: { cname: '小明', age: 16 },
//   gang: { cname: '小刚', age: 18 },
//   wang: { cname: '小王', age: 15 }
// }