我之前在第一个循环中遇到了问题,因为迭代键的问题,现在用下面的代码解决了这个问题.PopupPopsDefined和PopupProps两种类型是相同的,除了PopupProps允许undefined.这就解决了我遇到的其他元素无法接受的键的问题.这里的代码都正确运行,我只是想更好地完成最后一部分,而不需要case语句和硬编码赋值.
mergeTool(baseConfig: PopupPropsDefined, overrides: PopupProps): PopupPropsDefined {
const keys = Object.keys(overrides) as (keyof PopupProps)[];
keys.forEach((key) => {
const newValue = overrides[key];
if (typeof newValue !== 'undefined') {
this.setPropValue(key, baseConfig, newValue);
}
});
return baseConfig;
}
这些类型定义为:
export interface PopupProps {
arrowDistance?: number;
arrowHeight?: number;
arrowOffset?: number;
arrowWidth?: number;
cornerRadius?: number;
paddingX?: number;
paddingY?: number;
shiftX?: number;
shiftY?: number;
zIndex?: number;
isManual?: boolean;
isModal?: boolean;
isTooltip?: boolean;
logging?: boolean;
debugMode?: boolean;
direction?: PopupDirection;
eventOff?: keyof HTMLElementEventMap;
eventOn?: keyof HTMLElementEventMap;
positioner?: string;
}
export interface PopupPropsDefined {
arrowDistance: number;
arrowHeight: number;
arrowOffset: number;
arrowWidth: number;
cornerRadius: number;
paddingX: number;
paddingY: number;
shiftX: number;
shiftY: number;
zIndex: number;
isManual: boolean;
isModal: boolean;
isTooltip: boolean;
logging: boolean;
debugMode: boolean;
direction: PopupDirection;
eventOff: keyof HTMLElementEventMap;
eventOn: keyof HTMLElementEventMap;
positioner: string;
}
下面是我想用更好的方式来做的丑陋代码.有没有什么方法可以检测我复制值的对象的类型,这样我就不必像这样有switch语句了.部分原因是它是如此的不可维护,如果我添加一个新属性,我必须记住将其添加到这里.
setPropValue(key: string, config: PopupPropsDefined, value: number | boolean | string) {
switch (key) {
case 'arrowDistance':
case 'arrowHeight':
case 'arrowOffset':
case 'arrowWidth':
case 'cornerRadius':
case 'paddingX':
case 'paddingY':
case 'shiftX':
case 'shiftY':
case 'zIndex':
config[key] = <number>value;
break;
case 'isModal':
case 'isTooltip':
case 'logging':
case 'debugMode':
case 'isManual':
config[key] = <boolean>value;
break;
case 'direction':
config.direction = value as PopupDirection;
break;
case 'eventOff':
case 'eventOn':
config[key] = value as keyof HTMLElementEventMap;
break;
case 'positioner':
config.positioner = <string>value;
break;
}
}