TypeScript Notes — enumerations

An enumeration is a collection of finite sequences. In TypeScript, an enumeration type is a primitive type defined by the enum keyword. An enumeration type consists of zero or more enumerators, each of which is a named constant.

Numerical enumeration

Numeric enumerations are the most common type of enumeration, with each numeric enumerator representing a specific number.

enum Color {
  red = 1,
  blue = 2,
  yellow = 4,
  black = 7
}
Copy the code

Numeric enumeration syntax sugar

If the enumeration member’s value is not set when the enumeration is defined, TypeScript calculates the enumeration member’s value automatically

The value of the first enumerator is 0, and the value of each subsequent enumerator is equal to the value of the previous enumerator plus 1

enum Color {
  red,	/ / 0
  blue,	/ / 1
  yellow,	/ / 2
  black, / / 3
}
Copy the code

You can set initial values for one or more enumerators

enum Color {
  red = 1./ / 1
  blue,	/ / 2
  yellow = 4./ / 4
  black, / / 5
}
Copy the code

Numeric enumerations and number types

Numeric enumerations are subtypes of number, so it is possible to assign numeric enumerations to number types

enum Color {
  red,	/ / 0
  blue,	/ / 1
  yellow,	/ / 2
  black, / / 3
}
const color: number = Color.red
Copy the code

Note: The number type can also be assigned to an enumeration type, even if the value of the number type is not in the list of enumeration member values

enum Color {
  red,	/ / 0
  blue,	/ / 1
  yellow,	/ / 2
  black, / / 3
}

const color1: Color = 0 // Color.red
const color2: Color = 10; // No errors are generated
Copy the code

Enumerator mapping

For numeric enumerations, you can get the enumerator name from the enumerator name and vice versa

enum Color {
  red,	/ / 0
  blue,	/ / 1
  yellow,	/ / 2
  black, / / 3
}

Color.red / / 1
Color[Color.red] // 'red'
Color[0] // 'red'
Copy the code

String enumeration

In string enumerations, the value of an enumerator is a string, the member must be initialized, and there is no self-growth behavior.

  enum Color {
    red = 'red',
    blue = 'blue',
    yellow = 'yellow',
    black = 'black'
  }
Copy the code

String enumerations and string types

String enumerations are subtypes of string, so string enumerations are allowed to be assigned to strings

  enum Color {
    red = 'red',
    blue = 'blue',
    yellow = 'yellow',
    black = 'black'
  }
	
const color: string = Color.red
Copy the code

Note: Assigning a string type to a string enumeration type is not allowed

Isomeric enumeration

Define both numeric enumerators and string enumerators in enumerations (not recommended for real projects)

enum Color {
  red = 0,
  blue = 'blue'
}
Copy the code

Const enumeration type

Const enumerators are completely removed at compile time and, where const enumerators are used, the values of const enumerators are directly inlined into the code

// const enumeration type
const enum Color {
  red,	/ / 0
  blue,	/ / 1
  yellow,	/ / 2
  black, / / 3
}

const colors = [
  Color.red,
  Color.blue,
  Color.yellow,
  Color.balc
]

/********* const enumeration type compiled into JS code ********/
"use strict";
const colors = [
    0 /* red */.1 /* blue */.2 /* yellow */.3 /* black */
];


// Enumeration type
enum Color {
  red,	/ / 0
  blue,	/ / 1
  yellow,	/ / 2
  black, / / 3
}

const colors = [
  Color.red,
  Color.blue,
  Color.yellow,
  Color.black
]

/********* Enumeration type compiled into JS code ********/
"use strict";
var Color;
(function (Color) {
    Color[Color["red"] = 0] = "red";
    Color[Color["blue"] = 1] = "blue";
    Color[Color["yellow"] = 2] = "yellow";
    Color[Color["black"] = 3] = "black";
})(Color || (Color = {}));
const colors = [
    Color.red,
    Color.blue,
    Color.yellow,
    Color.black
];
Copy the code

Enumeration: is a bidirectional key-value pair (can get a value from a value, or can get a build from a value) that will invade compiled JS code constant enumeration: can only get a value from a build

Use suggestion: If you do not need to obtain key values by index, use constant enumeration

Use the sample

Examples of using enumerations in VUe3

// statusEnum.ts
export enum ApplyStatus {
    checkPending,  / / approval
    success,    // Audit successful
    refuse  // Review rejection
}

// Get the name of the enumeration
export function getApplyStatus(type: Status) {
    let result = The '-'
    switch (type) {
        case Status.checkPending:
            result = 'Pending review'
            break
        case Status.success:
            result = 'Audit successful'
            break
        case Status.refuse:
            result = 'Audit rejection'
            break
    }
    return result
}

// vue
<template>
  <div>
    <select>
        <option v-for="item in list"
          :key="item.value"
          :key="item.value">
          {{item.lable}}
       </option>
    </select>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { ApplyStatus, getApplyStatus} from './statusEnum.ts'

export default defineComponent({
      setup() {
        const list = [
          { value: ApplyStatus.checkPending, lable: getApplyStatus(ApplyStatus.checkPending) },
          { value: ApplyStatus.success, lable: getApplyStatus(ApplyStatus.success) },
          { value: ApplyStatus.refuse, lable: getApplyStatus(ApplyStatus.refuse) },
        ]
        
        return { list }
      }
    })
</script>
Copy the code

Benefits of use:

1. Easy to read code. For example, getApplyStatus(applyStatus.checkPending) and getApplyStatus(1), when the parameter is 1, we need to find the meaning of the 1, but enumeration is better to express the intention

2. Easy to maintain (reduce code coupling when the program does not rely on enumeration member values). For example, when you need to add an enumeration to commit, you can add the corresponding enumeration to the original one. If it dies, you need to break the previous code because the enumeration values have changed.