Ошибка 'Дублирующая подпись индекса строки' в Reactjs с Typescript

Question

Я сделал объект, используя Typescript в Reactjs.
Ниже приведен код.
Но это делает эту ошибку в данных UserInformation от пароля до фамилии.
Не могли бы вы дать мне совет?

Дублирующая подпись индекса строки

import { observable, action } from 'mobx';

export interface ISignStore {
  email: string,
  password: string,
  firstName: string,
  lastName: string,
  handleInput(e: any): void,
  handleSubmit(e: any): void
}

export class SignStore implements ISignStore {
  @observable
  UserInformation: {
    [email: string]: '',
    [password: string]: '',
    [firstName: string]: '',
    [lastName: string]: ''
  };

  @action
  handleInput = (e: any): void => {
    [e.target.id] = e.target.value;
  };

  @action
  handleSubmit = (e: any): void => {
    e.preventDefault();
    console.log(this.UserInformation);
  };
}

Answer 1

Когда вы знаете, какие типы конкретного объекта, TypeScript позволяет вам использовать интерфейсы, которые вы определили с помощью ISignStore. Следуя той же схеме для UserInformation, тип будет:

interface IUserInformation {
  email: string;
  password: string;
  firstName: string;
  lastName: string;
}

С другой стороны, используемый в настоящее время синтаксис называется Индексная подпись .

interface IObject {
  [k: number]: string
}

Это в основном говорит о том, что у вас есть объект, но вы не знаете, какие у него будут ключи; Но вы уверены, что ключом будет число, а значением будет строка. Переменная k здесь просто заполнитель, вы можете использовать что угодно в этом месте. Таким образом, благодаря этому нет смысла использовать второй ключ для k2: number. Потому что k: number уже рассмотрел этот случай.

Это ошибка, которую вы получаете, определив email, password и firstName в качестве ключей в сигнатуре индекса. Они просто дубликаты для ключа string.

Answer 2

 UserInformation: {
    [email]: '',
    [password]: '',
    [firstName]: '',
    [lastName]: ''
  };

Я думаю, вы уже назначаете тип этим вещам.