CODEWITHSUNDEEP
typescript
Spadesd
Spadesd

Reputation: 63

How to create an index signature for an interface

I don't know how I should create an index signature for my interface.

I've just been working as a developer for 2 months and I am stumped about this issue. This is my first question on stack.

My code looks like this.

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
}

I then get the following error.

TS7017: Element implicitly has an 'any' type because type 'ICredentials' has no index signature.

Upvotes: 2

Views: 5384

Answers (1)

Dor Shinar
Dor Shinar

Reputation: 1512

In order to use the object[key] syntax, you must inform the typescript compiler that your object can index using a specific type (for instance, using string or numbers).
From the typescript documentation:

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.

A code example (from the documentation as well):

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

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

let myStr: string = myArray[0];

So, in order to make your credentials object indexable, you should declare it like that:

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

Upvotes: 4

Related Questions