深层嵌套数组的 TypeScript 接口(interface)

Question

我是 Typescript 的新手，并且已经能够在其他领域取得一些进展，但正在努力为具有“taskName”和“totalTask​​Hours”的深层嵌套对象创建接口(interface)。数据如下所示:

[
    {
      "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

或者如果 holder 中可以有其他属性，则只使用该键/条目/值数组:

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