TypeScript React 项目中 JSON 数据的列子集答案

【问题标题】：Subset of columns of JSON Data in TypeScript React projectTypeScript React 项目中 JSON 数据的列子集
【发布时间】：2021-08-30 23:45:46
【问题描述】：

我正在开发一个打字稿项目，其中我获取以下形式的数据：

const data1 =  { id: 0, rac: 43, tcreated: "12-04-21", tupdated: "12-09-22", Custname: "A" }

现在我想动态过滤列以进行进一步处理，

const fields = ["id", "tcreated", "Custname"];

我找到了普通 Javascript 的解决方案

const subset = fields.reduce((a, e) => ((a[e] = data1[e]), a), {});

但是这在我的 typescript React 项目中不起作用。我尝试了here 提到的各种其他方法，但由于类型不匹配 TS7053，似乎没有一种方法有效。有什么想法吗？

【问题讨论】：

你试过这个方法吗 - codesandbox.io/s/boring-sound-4f9zo?file=/src/App.tsx

标签： json reactjs typescript

【解决方案1】：

您必须定义一个interface，如下所示，

 interface DataConfig {
    [propName: string]: string | number;
  }

  const data1: DataConfig = {
    id: 0,
    rac: 43,
    tcreated: "12-04-21",
    tupdated: "12-09-22",
    Custname: "A"
  };

并在迭代中提及元素类型，

 const subset = fields.reduce(
    (a: DataConfig, e) => ((a[e] = data1[e]), a),
    {}
  );

【讨论】：