Question

以下是我想在TypeScript中使用索引签名创建的类型。

export interface LoginState {
    account: {
              [userName: string]: string;
              [password: string]: string;
           };
}

但是，我收到此问题标题中所述的错误。该工具抱怨/突出显示了密码字段。

我找到了以下答案： The error of 'Duplicate string index signature' at Reactjs with Typescript 但这对我的问题没有帮助。

有人可以指出我在这里犯的错误吗？

请随时询问是否需要进一步说明。

干杯， RSF

P.S添加了完整的组件实现：

import * as React from "react";
import { User } from "./../interfaces/User";
import { SecurityService } from "./../services/SecurityService";

export interface LoginProps {
  onLogged: (user: User) => void;
}

export interface LoginState {
  currentUser: User | null;
  account: {
         [userName: string]: string;
         [password: string]: string;
  };
}

export class Login extends React.Component<LoginProps, LoginState> {

   constructor(props: LoginProps) {
          super(props);

          this.state = {
          currentUser: null,
               account: {
               userName: "",
               password: ""
           }
        };
   }

  handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
  };

  handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
      let account = { ...this.state.account };
      account[e.currentTarget.name] = e.currentTarget.value;
 };

 render() {
  return (
  <div>
    <h1>Login</h1>
    <form onSubmit={this.handleSubmit}>
      <div className="form-group">
        <label htmlFor="userName">Username</label>
        <input
          autoFocus
          onChange={this.handleChange}
          name="userName"
          id="userName"
          type="text"
          className="form-control"
        />
      </div>
      <div className="form-group">
        <label htmlFor="password">Password</label>
        <input
          onChange={this.handleChange}
          name="password"
          id="password"
          type="text"
          className="form-control"
        />
      </div>
      <button className="btn btn-primary">Login</button>
    </form>
  </div>
   );
  }
 }

Answer 1

来自Typescript Handbook

类似于我们可以使用接口来描述函数类型的方法，我们还可以描述我们可以“索引”的类型，例如a [10]或ageMap [“ daniel”]。可索引类型具有索引签名，该签名描述了我们可以用来对对象建立索引的类型，以及建立索引时对应的返回类型

当您使用index types时，您只是在告诉Typescript对自定义类型建立索引后会得到什么返回类型。

因此，您只需要告诉Typescript，当您使用字符串类型索引account时，将返回一个字符串类型。就是这样。

export interface LoginState {
  currentUser: User | null;
  account: {
      // Tells Typescript that a string index on account would return a string
      [k: string]: string;

      username: string;
      password: string;
      address: string;
      anotherField: string;
  };
}

通过这样定义它：

[userName: string]: string;
[password: string]: string;    // This is a duplicate string index

您正在这样做：

[k1: string]: string;
[k2: string]: string;    // This is a duplicate string index

这是错误的，因为您两次告诉Typescript同样的事情：如果您使用字符串对帐户进行索引，则会得到一个字符串。如果您使用字符串为帐户建立索引，则会得到一个字符串。

稍后，如果您想将number和id的{{1}}类型字段引入age，则您的定义应如下所示：

account

重复的字符串索引签名.ts（2374）

1 个答案: