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

Question

I have a data structure in JS. This is an object consisting of arrays of objects. And at the end of all this is one logical property. Here is an example:

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
}

I want to use the interface in TypeScript to describe it. What is the best way for me to do this? All that I came to on my own is this approach:

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

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

Unfortunately, this is not what I need. This causes a compiler error: TS2411: Property 'loading' of type 'boolean' is not assignable to string index type 'TodoInterface[]'

Answer 1

You just need to add boolean for value type in interface like this:

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