enummapping

Since typescript enumerations are only associated with key code, there are far more associations with labels and even more fields.

The following methods and attributes are usedtypescriptSignature and editor prompt.

grammar

import enummapping from 'enummapping';

const enumdata = enummapping({
  key1: enumOption,
  key2: enumOption,
  /** More enumerations **/
});
Copy the code

parameter

EnumOption: indicates the attribute description of each enumeration item, including the following attributes

key Value types If required The default value instructions
code string | number ✔ ️ – Of the current enumeration itemcode 值
label string ❌ – The text value of the current enumeration item
$sort number ❌ 0 $list,$map,$optionsSort parameters (in descending order of current value) when a method is called.
$exclude boolean ❌ false $list,$map,$optionsAnd whether the item is ignored in a method call
[any key] any ❌ – You can add any other key-value pairs, all supportedtsThe statement 
import enummapping from 'enummapping';

const gender = enummapping({
  male: { code: 1.label: 'male' },
  female: { code: 2.label: 'woman'}});/** Add a custom field */
const status = enummapping({
  notStart: { code: 1.label: 'not started'.tagColor: 'red'./ * *... more */ },
  processing: { code: 2.label: 'in progress'.tagColor: 'blue'./ * *... more */ },
  ended: { code: 3.label: 'Done'.tagColor: 'yellow'./ * *... more */}});Copy the code
  1. Can be achieved bykeyorcodeGets the current item.
gender.male === gender[1]; // true

gender.male.code; / / 1

/ * * without using strong bound since ` code ` obtain (usually is the server returned to field, Ken can exist the front not configuration items), so TS statement for undefined | item, need to use the optional chain in strict mode * /
gender[1]? .label;/ / male
Copy the code
  1. enumdata.$list(exculds): Obtain the pass$sortSorted enumeration list and exclude each itemoption.$excludeAs well as the parametersexculdsAll items contained in the array.
console.log(gender.$list(['male'])); // [{code: 2, label: 'female ',...more}]
Copy the code
  1. enumdata.$map(fn, exculds): first, through the$listGets a backward traversal callfnMethod and pass in the current value as wellindex. The equivalent ofenumdata.$list(exculds).map(fn).
gender.$map((item, index) = > <span key={item.code}>{item.label}</span>)
Copy the code
  1. enumdata.$options(exculds)Through:$listGet the list and regenerate itvalue = item.key.label = item.label || item.codeIs used primarily forantd 的 SelectComponents.
<Select options={gender.$options()}></Select>
Copy the code
  1. enumitem.is(key): Checks whether the current item is an enumerationkey.
gender[1]? .is('male'); // true
gender[1]? .is('female'); // false
Copy the code
  1. enumitem.eq(code): Checks whether the current item is an enumerationcode.
gender.male.eq(1); // true
gender.male.eq(2); // false
Copy the code
  1. enumitem.in(keys): Determines whether the current item is in a series of enumerationskeysIn the.
gender[1].in(['male'.'female']); // true
Copy the code
  1. About TS type use

Make use of editor’s support for JSDoc to achieve type fetching and fast jump.

// gender.ts
import enummapping from 'enummapping';

const gender = enummapping({
  male: { code: 1.label: 'male' },
  female: { code: 2.label: 'woman'}});// other.ts
import gender from 'gender.ts';
import { GetEnumCodeType } from 'enummapping';

interface Props {
  / * *@see {@link gender} * /
  sex: GetEnumCodeType<typeof gender>;
}
Copy the code

This allows you to quickly see the gender. Ts type declaration with editor support for Jsdoc.