Detailed explanation of the type of vue3 declaration field name enum

enum Type {
  primary = "primary",
  success = "success",
  warning = "warning",
  warn = "warn", // warning alias
  danger = "danger",
  info = "info",
}

type ColorConfig = {
  [key in Type]: Colors;
};

interface ColorConfig {
  [key: string]: Colors;
}

// **document/**
 * Get the enum value:
 * Get enumeration description: ('SH')
 * Get the description by enumeration value: ('TG')
 */
let STATUSMAP = createEnum({
  SH: ['SH', 'Additional'],
  TG: ['TG', 'Audit passed']
});
function createEnum(definition) {
  const valueMap = {};
  const descMap = {};
  for (const key of (definition)) {
    const [value, desc] = definition[key];
    valueMap[key] = value;
    descMap[value] = desc;
  }
  return {
    ...valueMap,
    getDesc(key) {
      return (definition[key] && definition[key][1]) || 'none';
    },
    getDescFromValue(value) {
      return descMap[value] || 'none';
    }
  }
}
export default STATUSMAP;

<el-row>
   <el-button>Enumeration tests</el-button>
   <p>Current status：{{('SH')}}</p>
   <p>You can also obtain the description by enumeration name：{{('HHH')}}</p>
 </el-row>
 <!-- Used in filters ThenfiltersUse functions directly in the filter to return the value -->

// document/**
 * Define enumeration value
 */
export default {
  order: [
    { value: 'TJ', label: 'Committed' },
    { value: 'CZ', label: 'Processing' },
    { value: 'CL', label: 'Processed' },
  ],
  orderDetail: [
    { value: 'DF', label: 'Awaiting shipment' },
    { value: 'FH', label: 'Shipped' },
    { value: 'QS', label: 'Signed' },
  ]
}

// document/**
 * Define the enumeration tool
 *  
 */
import order from './order/';
let constants = {
  ...order
};
let valueMap = {};
let nameMap = {};
(constants).forEach(key => {
  valueMap[key] = [];
  nameMap[key] = {};
  constants[key].forEach(event => {
    valueMap[key].push(event);
    nameMap[key][] = ;
  });
});
export {
  valueMap,
  nameMap
}

/**
 * view file
 */
<template>
    <h3>Enumeration values ​​are used for display</h3>
    <el-row>
        <el-button v-for="(item, index) in " :key="index">{{}}</el-button>
    </el-row>
    <h3>Enumeration value filter</h3>
    <el-row>
        <el-button>{{enumValue | filterStatus('orderDetail')}}</el-button>
    </el-row>
</template>
<script>
    import { valueMap, nameMap } from '@/constants';
    export default {
      data() {
        return {
          STATUS: STATUS,
          valueMap,
          enumValue: 'FH', // Delivery        }
      },
      filters:{
        filterStatus: function(val, key){
          if(!val && val !== 0){
            return 'none';
          }
          return nameMap[key][val]; 
        }
      }
    }