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

#reactjs #typescript #mobx

Вопрос:

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

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

 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);
  };
}

Ответ №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 ключа на основе.

1. Но что, если я действительно хотел иметь вторую подпись индекса, потому что данные, назначенные ей, отличаются? В моем примере я пытаюсь структурировать состояние для Redux и буду использовать byId и allIDs в качестве шаблона. Но Id и IDs части из них могут измениться, скажем, на byName и allNames . Можно ли это выполнить? (Возможно, мне следует начать новый вопрос).

Ответ №2:

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

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