关于typescript:TypeScript-Map实现一个公共数据管理模块DataMap

在大型中后盾我的项目开发中，尤其是在应用 React 进行开发时，咱们会遇到很多下拉框数据、多选框数据、或者编码中多处应用到的业务型公共映射表。为了便于保护，能够把这些数据都集中放到一个模块中，而不是扩散的写在各个中央。

实现思路

咱们定义一个 IMapExtra 接口扩大一下 Map 实例，建设两个类 MapExtra 和DataMap，MapExtra是为了在应用数据时更不便获取 Map 类型数据。最初把 map（数据映射）都存储在 DataMap 类的成员中。

开始

首先咱们创立一个 DataMap.ts 文件用于公共数据治理的模块，并在外面创立一个 MapExtra 类实现 IMapExtra 接口，MapExtra性能次要是对原生 Map 进行一个简略的封装。起因是咱们须要这个 MapExtra 实例来存储数据并可更不便的应用 .get 间接获取到对应的数据项。

DataMap.ts

import * as utils from '@/utils';

type MapType<T> = Array<[T, T]>;
interface IMapExtra {
    map: Map<string| number, string| number>;
    has:  (key: string) => boolean;
    get: (key: string) => string| number;
    getOptions: () => TYPE.IOption[];
}
class MapExtra  implements IMapExtra {
    public map;
    private _map;
    public constructor(map: MapType<string| number>) {this._map = new Map(map);
        this.map = new Map(map);
    }

    public getOptions: IMapExtra['getOptions']  = () =>  utils.mapToOption(this._map);
    public has: IMapExtra['has'] = (key) => this._map.has(key);
    public get: IMapExtra['get'] = (key) => this._map.get(key) ?? key;
}

同时下面减少了一个 getOptions 办法更不便的拿到对应以后数据的下拉框构造，当然这里还能够扩大 map 转其余构造的数据。

mapToOption办法和下拉框构造接口的细节：

import * as TYPE from '@/interface';
//map 转换成 select option 型数组
export const mapToOption = function(map: Map<string | number, string | number>): TYPE.IOption[] {const option = [];
    for (const [k, v] of map) {option.push({label: v, value: k});
    }
    return option;
};
interface 中导出 IOption
export interface IOption<T = string | number | boolean> {
    label: string | React.ReactNode;
    value: T;
    name?: string | number;
}

接下来持续在文件中创立两个 FC、LC 对象和 DataMap 类，把要存储的数据通过 MapExtra 实例化后存到对应属性中：

...
const FC = {
    category: new MapExtra([['product',  '产品'],
        ['marketplace', '平台'],
    ]),
    timeUnit: new MapExtra([['month',  '月度'],
        ['quarter', '季度'],
        ['year', '年度'],
    ]),
};

const LC = {
    remarkAction: new MapExtra([['created',  '创立'],
        ['edited', '批改'],
        ['remark', '备注']
    ]),

    infoStatusMap: new MapExtra([['normal', '失常'],
        ['invalid', '作废']
    ])
};


class DataMap {
    private _maps: Record<string, Record<string, IMapExtra>> = {
        LC,
        FC
    };

    public getMapsLC: () => Record<keyof typeof LC, IMapExtra> = () => {return this._maps.LC;};
    public getMapsFC: () => Record<keyof typeof FC, IMapExtra> = () => {return this._maps.FC;};
}

const dataMap =  new DataMap();
export const getMapsLC = dataMap.getMapsLC();
export const getMapsFC = dataMap.getMapsFC();

DataMap 是次要的用于治理整个数据模块，并导出 DataMap 对应模块的该实例办法，getMapsXXX其实就是对外提供间接获取对应 XXX 的数据模块。

成员_maps 通过对象模式辨别模块间接导出 LC 业务模块的 dataMap 实例，当后续新增业务模块时也是一样的须要新建对应的获取成员办法和导出。

这里_maps 是定义为了一个公有成员，其实不是真正意义上的公有成员，_maps 属性还是能够通过实例上获取到的。

最初

上面咱们来应用这些数据，如获取一个下拉数据数组：
1.

import {getMapsLC} from '@/libs/DataMap';

console.log(getMapsFC.timeUnit.getOptions())

2.

//antd 下拉框配置
 {
                        name: 'action',
                        label: '抉择你的类型',
                        component: {
                            mode: 'multiple',
                            type: 'select',
                            options:getMapsLC.remarkAction.getOptions(),
                            placeholder: '请抉择一项'
                        }
},



//antd 映射出对应的值
        {
            title: '表格某一列',
            width: 100,
            dataIndex: 'action',
            render: (text: string) => getMapsLC.remarkAction.get(text)
        },

导入 getMapsLC 之后，getMapsLC.remarkAction.get(XXX) 间接就能获取到对应数据，getMapsLC.remarkAction.map 则是间接取出一个 map 型的数据，并且可通过 mapToOption 转为下拉框数据的值。

残缺代码：

import * as utils from '@/utils';

type MapType<T> = Array<[T, T]>;
interface IMapExtra {
    map: Map<string| number, string| number>;
    has:  (key: string) => boolean;
    get: (key: string) => string| number;
    getOptions: () => TYPE.IOption[];
}
class MapExtra  implements IMapExtra {
    public map;
    private _map;
    public constructor(map: MapType<string| number>) {this._map = new Map(map);
        this.map = new Map(map);
    }

    public getOptions: IMapExtra['getOptions']  = () =>  utils.mapToOption(this._map);
    public has: IMapExtra['has'] = (key) => this._map.has(key);
    public get: IMapExtra['get'] = (key) => this._map.get(key) ?? key;
}


const FC = {
    category: new MapExtra([['product',  '产品'],
        ['marketplace', '店铺'],
    ]),
    level: new MapExtra([['primary',  '一级分类'],
        ['secondary', '二级分类']
    ]),
    timeUnit: new MapExtra([['month',  '月度'],
        ['quarter', '季度'],
        ['year', '年度'],
    ]),
};

const LC = {
    remarkAction: new MapExtra([['created',  '创立'],
        ['edited', '批改'],
        ['remark', '手动备注']
    ]),

    infoStatusMap: new MapExtra([['normal', '失常'],
        ['invalid', '已作废']
    ])
};


class DataMap {
    private _maps: Record<string, Record<string, IMapExtra>> = {
        LC,
        FC
    };

    public getMapsLC: () => Record<keyof typeof LC, IMapExtra> = () => {return this._maps.LC;};
    public getMapsFC: () => Record<keyof typeof FC, IMapExtra> = () => {return this._maps.FC;};
}

const dataMap =  new DataMap();
export const getMapsLC = dataMap.getMapsLC();
export const getMapsFC = dataMap.getMapsFC();