Как установить объект с динамическим ключом c в качестве состояния React в Typescript

Question

Я использую React и Typescript, и мне нужно создать объект с динамическим ключом c, который имеет два предопределенных свойства. Поле является динамическим c, поэтому я не могу предварительно определить его в Typescript. Структура, которую я попытался реализовать в интерфейсе:

[field: string]: {
   property1: string,
   property2: string
}

Затем я хочу иметь возможность динамически устанавливать ключ этого объекта. Например,

let item: string = "randomTest"

 this.setState({
    [item].property1: "test value 1"
 })

и доступ к нему через:

this.state[item].property1

Однако, когда я пытаюсь реализовать эту структуру в интерфейсе Typescript, ключи состояния, которых нет в динамическом c объект выдает ошибку, говоря, что они «не могут быть присвоены строковому индексу типа« {property1: string} ». Например, нижеприведенный testKey1 выдаст эту ошибку:

[field: string]: {
   property1: string,
   property2: string
};
testKey1: string;

Эта ошибка говорит о том, что testKey1 находится в объекте [field], хотя это не так.

Как эффективно определить объект с динамическим ключом c в качестве состояния React в Typescript?

Answer 1

Вы можете использовать встроенный тип записи, добавленный в TypeScript 2.1. Запись

interface MyObject {
  property1: string;
  property2: string;
}

type DynamicObject = Record<string, MyObject>;

Answer 2

Замените

[field: string]: {
   property1: string,
   property2: string
}

на

    interface Anything {
      [key: string]: any;
    }

А когда вы звоните, то: сделайте это

let item = { property1: "randomTest", property2: "randomTest1", property3: "randomTest3"}

 this.setState({
    [item].property1: "test value 1"
 })

Answer 3

Добавить семекон перед testKey1: string;