使用TypeScript中的接口来描述JS中的数据结构

Question

我在 JS 中有一个数据结构。 这是一个由 arrays 对象组成的 object。 归根结底，这是一个合乎逻辑的属性。 这是一个例子：

const initialData = {
  [groupKeys[0]]: [
    {
      content: 'Task 1',
      isCompleted: true,
      id: generateUnicueId(),
      group: groupKeys[0],
      deadline: "",
      isOverdue: false
    },
    {
      content: 'Task 2',
      isCompleted: false,
      id: generateUnicueId(),
      group: groupKeys[0],
      deadline: "",
      isOverdue: false
    },
  ],
  [groupKeys[1]]: [
    {
      content: 'Task 3',
      isCompleted: false,
      id: generateUnicueId(),
      group: groupKeys[1],
      deadline: "",
      isOverdue: false
    },
    {
      content: 'Task 4',
      isCompleted: false,
      id: generateUnicueId(),
      group: groupKeys[1],
      deadline: "",
      isOverdue: false
    },
  ],
  loading: true
}

我想用TypeScript中的接口来描述。 对我来说最好的方法是什么？ 我自己想到的就是这种方法：

interface TodoInterface {
  content: string,
  isCompleted: boolean,
  id: string,
  group: string,
  deadline: string,
  isOverdue: boolean
}

interface StateInterface {
  [key: string]: TodoInterface[],
  loading: boolean
}

不幸的是，这不是我需要的。 这会导致编译器错误： TS2411：“布尔”类型的属性“加载”不可分配给字符串索引类型“TodoInterface[]”

Answer 1

您只需要在界面中为值类型添加 boolean ，如下所示：

interface StateInterface {
    [key: string]: boolean | TodoInterface[];
    loading: boolean
}