时间戳

首页 > 解决方案 > 如何为接口创建索引签名

typescript - 如何为接口创建索引签名

问题描述

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

我刚刚作为开发人员工作了 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：元素隐式具有“任何”类型，因为类型“ICredentials”没有索引签名。

标签： typescript

解决方案

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

类似于我们如何使用接口来描述函数类型，我们也可以描述我们可以“索引到”的类型，如 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;
    }

推荐阅读