Чтобы описать структуру данных в JS с помощью интерфейса в TypeScript

Question

У меня есть структура данных в JS. Это объект, состоящий из массивов объектов. И в конце концов, это одно логическое свойство. Вот пример:

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: свойство 'loading' типа 'boolean' не может быть присвоено типу строкового индекса 'TodoInterface []'

Answer 1

Вам просто нужно добавить логическое значение для типа значения в интерфейсе, например:

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