带有 Typescript 的 Reactjs 中“重复字符串索引签名”的错误

IT技术 reactjs typescript mobx
2021-04-27 23:31:22

我在 Reactjs 使用 Typescript 创建了一个对象。
下面有一个代码。
但是它会在从密码到姓氏的 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);
  };
}
2个回答

当您知道特定对象的类型时，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基于密钥的重复。

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

我认为你已经为这些东西分配了类型。

其它你可能感兴趣的问题
上一篇如何从状态中获取数据并编辑表单中的元素？ 下一篇如何避免 ReactJS 中的 jQuery 调用