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

Question

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

const initialData = {
  [groupKeys[0]]: [
    {
      content: 'Задача 1',
      isCompleted: true,
      id: generateUnicueId(),
      group: groupKeys[0],
      deadline: "",
      isOverdue: false
    },
    {
      content: 'Задача 2',
      isCompleted: false,
      id: generateUnicueId(),
      group: groupKeys[0],
      deadline: "",
      isOverdue: false
    },
  ],
  [groupKeys[1]]: [
    {
      content: 'Задача 3',
      isCompleted: false,
      id: generateUnicueId(),
      group: groupKeys[1],
      deadline: "",
      isOverdue: false
    },
    {
      content: 'Задача 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: true.

Answer 1

Последним - нельзя

A rest element must be last in a tuple type.(1256)

type $qwaList<T,masterKey = any> = [...T[], masterKey] // A rest element must be last in a tuple type.(1256)

А так можно

// -
type $qwaList<T, masterKey = any> = [masterKey, ...T[]]
// -
// -
let qwaList: $qwaList<string, boolean> = [false]
// -
push: {
    Array.from({ length: 12 }, (q, i) => {
        qwaList.push(`${i}`)
    })
    qwaList[0] = true
}
// -
use: {
    const isOK = qwaList[0]
    if (isOK) {
        // -,-
    } else {
        // -,-
    }
}
// -

Ну а если очень хочется

Всё зависит от ситуации, есть способы различной степени извращённости:

от простого // @ts-ignore

const strList: string[] = ['','','',]
// @ts-ignore
strList.push(true)

до ... , например class qwaList extends Array { }

в комметарии вам предложили ключ вынести в отдельную переменную и не писать в массив:

type $qwaList2<T, masterKey = any> = T[] & {
    last: masterKey
}

const qwaList2: $qwaList2<string, boolean> = [] as any
qwaList2.last = false

push: {
    qwaList2.push('')
    qwaList2.push('')
    qwaList2.push('')
    qwaList2.last = true
}

а вот модифицированный вариант (на случай если у вас уже есть обработчик таких массивов и вам нужно под него подстроиться):

type $qwaList2<T, masterKey = any> = [...T[]] & {
    last: masterKey
}

function genQwaList2<T, masterKey = any>(): $qwaList2<T, masterKey> {
    const arr: any[] = []
    Object.defineProperty(arr, 'last', {
        get(this: typeof arr) { return this[this.length - 1] },
        set(this: typeof arr, val) { return this[this.length - 1] }
    })
    // TODO: ? добавить блокировку
    return arr as any
}

const qwaList2 = genQwaList2<string, boolean>()


setStr: {
    qwaList2.push('')
    qwaList2.push(...['', '', ''])
}
setLast: {
    // @ts-ignore
    qwaList2.push(true)
    // OR
    qwaList2.last = true
}

use: {
    const isOK = qwaList2.last
    if (isOK) {
        // важно! `length - 2` обходим последний
        for (var i = 0; i < qwaList2.length - 2; i++) {
            // -
        }
    } else {
        // -
    }
}

БЛОГ НА HUSL

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

Ответы (1 шт):

Последним - нельзя

А так можно

Ну а если очень хочется