Проблемы с созданием интерфейса Typescript с указанными и неуказанными ключами

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

interface ComponentState {
  booleanProperty: boolean
  [unspecifiedKey: string]: {
    [name: string]: string
  }
}

Это тоже не сработает

interface UnspecifiedKey { [name: string]: string }

interface ComponentState {
  booleanProperty: boolean
  [unspecifiedKey: string]: UnspecifiedKey
}

Мое состояние выглядит так:

this.state = {
  booleanProperty: true
  whatever: {value: ''}
}

И я получаю сообщение об ошибке:

Property 'booleanProperty' of type 'boolean' is not assignable to string index type '{ [name: string]: string; }'.

Error TypeScript Type '{ whatever: { value: string; }; booleanProperty: true; }' is not assignable to type 'Readonly'. Property 'booleanProperty' is incompatible with index signature. Type 'true' is not assignable to type '{ [name: string]: string; }'.

Typescript не выдает ошибку только тогда, когда мое состояние выглядит следующим образом

interface ComponentState {
  [unspecifiedKey: string]: {
    [name: string]: string
  } | boolean
}

Однако я считаю это решение некрасивым. Есть идеи, как сделать интерфейс более аккуратным?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
536
1

Ответы 1

вот ответ

для быстрого исправления вы можете использовать

interface ComponentState { booleanProperty: boolean, \[unspecifiedKey: string]: any }

Боюсь, вы не связали ответ с моим вопросом. Все заявленные мною свойства обязательны. Объект с неопределенными ключами должен появиться хотя бы один раз. И я не могу их использовать, потому что мне нужно описать его структуру.

Dune 03.01.2019 11:29

Как описано в машинописном тексте [docs] [1], если вы используете индексируемые свойства, тогда весь возвращаемый тип всех других свойств должен быть назначен типу возвращаемого типа возвращаемого типа индекса. Это потому, что foo ['bar'] и foo.bar одинаковы. [1]: typescriptlang.org/docs/handbook/… в вашем случае есть только «любой» как решение. (Не знаю, как добавить ссылку в комментарий) Это был один из ответов. Это не имеет никакого отношения к необходимому реквизиту.

Juraj Kocan 03.01.2019 13:26

Это должен быть ваш ответ, а не комментарий. :) Проверял как решено.

Dune 23.01.2019 01:38

Другие вопросы по теме