enum-loader
enum-loader
将对 typescript 的枚举(enum)进行处理
开始
你需要先下载enum-loader
npm install --save-dev enum-loader 或 yarn add --save-dev enum-loader
配置
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(ts|tsx)$/i,
use: ["enum-loader"],
},
],
},
};
在 umi3 项目中
.umirc.ts
chainWebpack(config: any) {
config.module
.rule('enum-loader')
.test(/.(ts|tsx)$/)
.pre()
.include.add([
path.resolve(process.cwd(), 'src'),
path.resolve(process.cwd(), 'config'),
])
.end()
.use('enum-loader')
.loader(require.resolve('enum-loader'));
}
功能
enum-loader
会将在typescript中加了@name和@description注解的枚举进行反射
处理,并向该枚举添加toArray
和toDictionary
静态方法。
toArray
将添加了注解@name 和 @description的枚举转换为数组,数组格式为{label: string, value: string}[]
,其中label
属性使用的是注解@description
的值,value
属性使用的是枚举的 值
.
toDictionary
将添加了注解@name 和 @description的枚举转换为数组,数组格式为{[key: string]: {label: string, value: string}}
,以枚举的值
为key,字典的值为toArray方法的{label: string, value: string}.
示例
定义枚举
enum ENUM {
/**
* @name TEST
* @description 测试
*/
TEST = 'TEST',
/**
* @name STATUS
* @description 状态
*/
STATUS = 0,
/**
* @name ALL
* @description 全部
*/
ALL = 'ALL',
}
经过enum-loader
处理之后,
// 调用枚举的toArray方法,目前需要忽略tslint的检测
// @ts-ignore
ENUM.toArray();
//输出
[
{
"label": "测试",
"value": "TEST"
},
{
"label": "状态",
"value": "0"
},
{
"label": "全部",
"value": "ALL"
}
]
//@ts-ignore
ENUM.toDictionary();
// 输出
{
1: {label: "状态", value: "0"}
ALL: {label: "全部", value: "ALL"}
TEST: {label: "测试", value: "TEST"}
}