Javascript 将对象属性更改/映射为枚举值
我从后端获得一个如下所示的数据对象:Javascript 将对象属性更改/映射为枚举值,javascript,typescript,Javascript,Typescript,我从后端获得一个如下所示的数据对象: data: [ {description: 'desc', timestamp: yesterday, type: 'Repair', repair: {}}, {description: 'desc', timestamp: oneMonthBack, type: 'Checked', readout: {}}, {description: 'desc', timestamp: t
data: [
{description: 'desc', timestamp: yesterday, type: 'Repair', repair: {}},
{description: 'desc', timestamp: oneMonthBack, type: 'Checked', readout: {}},
{description: 'desc', timestamp: threeMonthBack, type: 'False', fault: {}},
{description: 'desc', timestamp: yesterday, type: 'Read', falseRead: [{}]},
{description: 'desc', timestamp: yesterday, type: 'Clear'}
],
在前端,我们通过一个枚举更改了数据“类型”:
export enum ProductEventType {
FAULT = 'Alert',//Old "False"
REPAIR = 'repair', //old 'Repair'
DELIVERY = 'Delivery', //same as before
CHECKIN = 'check-in', //old 'checked'
READFAULTS = 'readFaults', //old Read
CLEARFAULTS = 'ClearFaults', //old Clear
}
从后端获取数据时,我们使用地图并检查每个项目:
this.vehicleEvents.data.forEach((item) => {
if (RepairEvent.isRepairEvent(item)) {...}
在RepairEvent.isRepairEvent中存在一个问题,错误在于我们匹配了数据的后端名称和前端枚举名称。请注意,我们导入并使用枚举类型:
export class ClearFaultsEvent extends ProductTimelineEvent {
public static isClearFaultsEvent(event: ProductTimelineEvent): event is ClearFaultsEvent {
return event.type === ProductTimelineEventType.CLEARFAULTS;
//err, event.type is 'Clear' while the enumtype have the name "ClearFaults"
}
在上面的代码中,我们比较了数据的后端名称和枚举中的名称,这显然返回false,但我们想要true。我们希望event.type以某种方式映射或与枚举值组合,以便条件值能够工作。至于现在,它将永远是假的。有什么帮助吗?你好像在问这个问题
const adaptType = adaptTable => f => ({type}) => f({
type: adaptTable[type]
});
const adaptProductEvents = adaptType({
'False': 'Alert',
'Repair': 'repair',
'Delivery': 'Delivery',
'checked': 'check-in',
'Read': 'readFaults',
'Clear': 'ClearFaults',
});
data.map(adaptProductEvents(ClearFaultsEvent.isClearFaultsEvent))
// [ false, false, false, false, true ]
但它不能扩展。更合理的更改是创建符合后端API的适配器类
现在我很惊讶枚举的值对您很重要。如果需要根据枚举值执行某些IO,则演示者应负责将它们转换为正确的输出。您不希望业务规则知道视图。请考虑修改这个问题中的代码,以便构成一个当它落入独立IDE时,清楚地显示您所面临的问题。这将允许那些想要帮助您的人立即着手解决问题,而无需首先重新创建问题。它将使您得到的任何答案都可以根据定义良好的用例进行测试。您能解释前端更改的目的吗?这些新值是显示给用户还是什么?他们是干什么的?如果没有令人信服的理由,显而易见的答案是“将
enum
更改回后端,使其与后端数据匹配,如果您仍然需要前端中的一些不同的值集,请为其创建一个新的数据结构”。就像这样!我不得不做一些类型声明,但它给了我一个错误“Binding element'type'隐式地有一个'any'类型。”参见链接:我同意这个解决方案本可以更好,但不幸的是,这是两个不同的团队实现它的方式。为了让它工作,不得不在TS中更改({type}:{type:any})。再次感谢。