React TypeScript中如何将对象转换为带类型信息的数组？

表单包含input、output、outputType字段，outputType可选值为String、Number、Boolean。目前已通过代码将表单值处理成无类型信息的对象（用于表格展示），现在需要将该对象转换为包含input、outputType、output的结构化数组，以适配编辑页的数据需求。

现有代码 #

const mapped = form.values.formValue.reduce((obj: ValueMaped, { input, outputType, output }) => {
    let parsedOutput: ValMap['output']

    switch (outputType) {
      case 'String':
        parsedOutput = output.toString()
        break

      case 'Number':
        parsedOutput = parseFloat(output.toString())
        break

      case 'Boolean':
        parsedOutput = Boolean(output)
        break
    }

    obj[input] = parsedOutput

    return obj
  }, {})
  onSave(mapped)

当前生成的对象结果 #

{
  "valueA": "sample value as string",
  "valueB": 123,
  "valueC": true
}

期望转换后的数组格式 #

[
  { "input": "valueA", "outputType": "String", "output": "sample value as string" },
  { "input": "valueB", "outputType": "Number", "output": 123 },
  { "input": "valueC", "outputType": "Boolean", "output": true }
]

解决方案 #

由于mapped对象丢失了outputType信息，无法仅通过该对象反推完整的结构化数组（比如无法区分字符串形式的数字和原生字符串），推荐两种处理方式：

方式1：同时生成表格对象和编辑页数组 #

直接在处理表单数据时，同时生成适配表格的对象和编辑页需要的结构化数组，避免数据丢失：

// 生成编辑页所需的结构化数组
const editPageData = form.values.formValue.map(({ input, outputType, output }) => {
  let parsedOutput;
  switch (outputType) {
    case 'String':
      parsedOutput = output.toString();
      break;
    case 'Number':
      parsedOutput = parseFloat(output.toString());
      break;
    case 'Boolean':
      parsedOutput = Boolean(output);
      break;
    default:
      parsedOutput = output;
  }
  return { input, outputType, output: parsedOutput };
});

// 生成表格展示用的无类型对象
const mapped = editPageData.reduce((obj, { input, output }) => {
  obj[input] = output;
  return obj;
}, {});

onSave(mapped);
// 编辑页直接使用 editPageData

方式2：通过原始表单数据还原数组 #

如果已经只有mapped对象，可结合原始的表单数据还原出带类型的数组：

// 假设能获取到原始的表单数据
const originalFormItems = form.values.formValue;
const editPageData = Object.entries(mapped).map(([input, output]) => {
  const matchedItem = originalFormItems.find(item => item.input === input);
  return {
    input,
    outputType: matchedItem?.outputType || 'String', // 无匹配项时兜底默认类型
    output
  };
});

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