为不同类型的对象元素赋值

Question

由于迭代键问题，我之前在第一个循环中遇到了问题，现在使用以下代码解决了这个问题。 PopupPopsDefined 和 PopupProps 这两种类型是相同的，只是 PopupProps 允许未定义。这解决了我遇到的其他元素不接受的键的问题。我这里的代码都运行正确，我只是想在没有 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;
    }
  }

Answer 1

jcalz 有正确的答案（顺便说一句，我只用了大约四行错误的代码就完成了这个复杂的重写）

setPropValue<K extends keyof PopupPropsDefined>(
  key: K, 
  config: PopupPropsDefined, 
  value: PopupPropsDefined[K]){

  config[key] = value;
}