reactjs - 重复的字符串索引签名.ts(2374)

Question

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

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

但是，我收到了这个问题标题中所述的错误。

该工具会提示/突出显示密码字段。



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

谁能指出我在这里犯的错误？

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

干杯，
无国界医生组织

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

Similarly to how we can use interfaces to describe function types, we can also describe types that we can “index into” like a[10], or ageMap["daniel"]. Indexable types have an index signature that describes the types we can use to index into the object, along with the corresponding return types when indexing

当您使用 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和 age至 account ，您的定义将如下所示:

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

      username: string;
      password: string;
      address: string;
      anotherField: string;
      id: number;
      age: number;
  };
}