Question

我不知道如何为界面创建索引签名。

我刚刚从事开发人员工作了2个月，对此感到困惑。这是我的第一个问题。

我的代码如下。

handleChangeWithConfirm = (fieldToConfirm: string) => (event: React.ChangeEvent<HTMLInputElement>) => {
    const name = event.target.name;
    const value = event.target.value;
    const {credentials} = this.state;
    credentials[name] = value;

    if (this.state.credentials[fieldToConfirm] !== event.target.value) {
        this.setState({confirmError: 'The Passwords do not match.', credentials});
    } else {
        this.setState({confirmError: '', credentials});
    }


export interface ICredentials {
    email: string,
    password?: string,
    username?: string,
    password_confirmation?: string,
    token?: string
}

然后我得到以下错误。

TS7017：元素隐式地具有“ any”类型，因为类型“ ICredentials”没有索引签名。

Answer 1

为了使用object[key]语法，必须通知打字稿编译器您的对象可以使用特定类型（例如，使用字符串或数字）建立索引。
来自typescript documentation：

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

代码示例（也来自文档）：

interface StringArray {
    [index: number]: string;
}

let myArray: StringArray;
myArray = ["Bob", "Fred"];

let myStr: string = myArray[0];

因此，为了使您的credentials对象可索引，您应该这样声明它：

export interface ICredentials {
        email: string,
        password?: string,
        username?: string,
        password_confirmation?: string,
        token?: string
        [key: string]: string;
    }

如何为接口创建索引签名

1 个答案: