TypeScript中如何向Record对象追加元素？

你的代码核心问题是错误地访问了submittedRecord.key和submittedRecord.value——Record<string, string>类型的对象是一组键值对集合，它本身并没有名为key和value的属性，所以这两个值始终返回undefined。

下面是几种正确实现追加键值对的方式：

方法1：使用扩展运算符（...）合并对象 #

扩展运算符可以快速将两个对象的键值对合并，生成新对象：

export interface DataRecord {
  headers: Record<string,string>;
}

public appendToRecord(submittedRecord?: Record<string,string>) {
  let defaultRecord: DataRecord = {
    headers: {
      header1: 'a',
      header2: 'b',
      header3: 'c',
      // 直接合并submittedRecord（如果存在）
      ...submittedRecord
    }
  }
}

如果需要保留原defaultRecord.headers的引用（后续可能修改），可以拆分合并逻辑：

public appendToRecord(submittedRecord?: Record<string,string>) {
  let defaultRecord: DataRecord = {
    headers: {
      header1: 'a',
      header2: 'b',
      header3: 'c',
    }
  }
  if(submittedRecord) {
    defaultRecord.headers = { ...defaultRecord.headers, ...submittedRecord };
  }
}

方法2：使用Object.assign()合并 #

Object.assign()会直接将第二个对象的键值对合并到第一个对象中（修改原对象）：

public appendToRecord(submittedRecord?: Record<string,string>) {
  let defaultRecord: DataRecord = {
    headers: {
      header1: 'a',
      header2: 'b',
      header3: 'c',
    }
  }
  if(submittedRecord) {
    Object.assign(defaultRecord.headers, submittedRecord);
  }
}

方法3：手动遍历键值对 #

如果需要对每个键值对做额外处理，可以手动遍历：

public appendToRecord(submittedRecord?: Record<string,string>) {
  let defaultRecord: DataRecord = {
    headers: {
      header1: 'a',
      header2: 'b',
      header3: 'c',
    }
  }
  if(submittedRecord) {
    for (const key in submittedRecord) {
      if (submittedRecord.hasOwnProperty(key)) {
        defaultRecord.headers[key] = submittedRecord[key];
      }
    }
  }
}

以上三种方法都能实现需求：当传入{header4: 'd'}时，defaultRecord.headers会包含header4: 'd'这个新增键值对。

内容的提问来源于stack exchange，提问作者user2990428