2

У меня есть структура данных на 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.

4
  • так подойдет? interface StateInterface { [key: string]: TodoInterface[], loading: boolean }
    – muturgan
    13 июл 2020 в 5:14
  • Спасибо, но к сожалению, при таком подходе компилятор выдает ошибку: TS2411: Property 'loading' of type 'boolean' is not assignable to string index type 'TodoInterface[]'. Уж думы думал я над этой загадочной ошибкой, но так ничего и не надумал. Проблема в вычисляемом свойстве. Если его заменить на обычное, то все работает, конечно, но это не то :) 13 июл 2020 в 5:17
  • можно просто уйти от проблем. StateInterface { loading: boolean; todoGroups: { [key: string]: TodoInterface[] } } 13 июл 2020 в 9:45
  • Да, так и сделал, в общем, спасибо! :) 13 июл 2020 в 9:48

1 ответ 1

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 {
        // -
    }
}
5
  • Ого, спасибо! Хитро! Мне не столь глобально надо было, конечно, но если нужно будет автоматизировать, то это самое то. Мне то в самом простом варианте помогло вот такое решение interface StateInterface { [key: string]: boolean | TodoInterface[]; loading: boolean}. 13 июл 2020 в 9:41
  • кстати, Кстати! про него то я забыл ) (про boolean | masterKey) лично я бы, при условии что с этим массивом работает какая-то библиотека, просто использовал // @ts-ignore в том место где вставляется boolean, тк скорее всего это единичный случай и я с этим массивом работать не буду(а будет библиотека)
    – qwabra
    13 июл 2020 в 9:47
  • С библиотеками прямо беда - без // @ts-ignore не получается. Что то, да и приходится заигонорить :) 13 июл 2020 в 9:51
  • ищите на гитхабе с меткой typescript и, возможно, вам стоит открыть для себя @types/ github.com/DefinitelyTyped/DefinitelyTyped. например @types/react - это типы к библиотеке реакт (устанавливаются отдельно)
    – qwabra
    13 июл 2020 в 9:54
  • ох, да, правда. Спасибо за советы! 13 июл 2020 в 9:59

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.