Question

我对Typescript完全陌生，并且能够在其他领域取得一些进展，但是正在努力为使用“ taskName”和“ totalTaskHours”的深层嵌套对象创建接口。数据如下：

[
    {
      "20229622": [
        {
          "taskName": "Project Management",
          "totalTaskHours": "1589.4"
        },
        {
          "taskName": "Marketing",
          "totalTaskHours": "1306.8"
        },
        {
          "taskName": "Design",
          "totalTaskHours": "212.4"
        },
        {
          "taskName": "Programming",
          "totalTaskHours": "415.8"
        }
      ]
    },
    {
      "20229623": [
        {
          "taskName": "Project Management",
          "totalTaskHours": "980.1"
        },
        {
          "taskName": "Marketing",
          "totalTaskHours": "717.3"
        },
        {
          "taskName": "Design",
          "totalTaskHours": "468.9"
        }
      ]
    },
    {
      "20229624": [
        {
          "taskName": "Programming",
          "totalTaskHours": "5930.1"
        },
        {
          "taskName": "Project Management",
          "totalTaskHours": "997.2"
        },
        {
          "taskName": "Marketing",
          "totalTaskHours": "2108.69"
        },
        {
          "taskName": "Design",
          "totalTaskHours": "529.2"
        }
      ]
    }
  ]

我试图深入到嵌套数组中的对象，但是每次都遇到错误。

missing_other_nested_objects

我尝试了以下操作（显然是错误的）：

interface TaskItem {
  taskName: string;
  totalTaskHours: string;
}

interface TaskItemArray {
  [key:string]: {
    [key:string]: TaskItem[];
  };
}
interface TaskBreakdownSummedByCategory {
  [key:string]: TaskItemArray[];
}

我也尝试了以下方法，但是数据太浅：

interface TaskItem {
  taskName: string;
  totalTaskHours: string;
}
interface TaskBreakdownSummedByCategory {
  [key:string]: TaskItem;
}

有人可以很快帮助我解决这个问题吗？我仍在学习，但是基本教程并没有真正通过深层嵌套对象进行。谢谢！

Answer 1

您真的关闭。由于外部数组是一个数组，因此只需定义其元素的类型（下面的TaskItemHolder）：

interface TaskItem {
  taskName: string;
  totalTaskHours: string;
}

interface TaskItemHolder {
  [key: string]: TaskItem[];
}

然后整个数组的类型为TaskItemHolder[]。

Live on the playground

也就是说，以上内容将在TaskItemHolder上允许多个属性，而不仅仅是一个。正如我在评论中提到的那样，如果您可以更改结构，我会的。具有一个名称不同的属性的对象不是一个好主意（即使在不使用静态类型的情况下也不是，尤其是在使用静态类型的情况下）。

如果要遍历该数据，由于结构问题，您可能会使用Object.keys(...)[0]来获取一个属性的键（或Object.entries(...)[0]来获取键和值，或者只是Object.values(...)[0]来获取值）：

for (const holder of data) {
  const key = Object.keys(holder)[0];
  console.log("Holder with key " + key + ":");
  for (const entry of holder[key]) {
    console.log(entry.taskName);
  }
}

Live copy

或如果持有人中可以包含其他属性，则仅使用该键/项/值的数组：

for (const holder of data) {
  for (const [key, value] of Object.entries(holder)) {
    console.log("Holder with key " + key + ":");
    for (const entry of value) {
      console.log(entry.taskName);
    }
  }
}

Live copy

深度嵌套数组的TypeScript接口

1 个答案: