I have an interface and a class :

export interface State {
    arr : any[];
}


export const INITIAL_STATE: State = {
    arr: []
};

This piles.

Now I'm chaning the Interface to be like :

export interface State {
    arr : any[];
    [key: string]: any
}

And the class to be like :

export const INITIAL_STATE: State = {
    arr: []    ,
    'a':2
};

- Still piles.

But now - If I want to be stricter in : [key: string]: any ---> [key: string]: number :

In other words :

export interface State {
    arr : any[];
    [key: string]: number
}


export const INITIAL_STATE: State = {
    arr: []    ,
    'a':2
};

I get an error :

Error:(7, 14) TS2322: Type '{ arr: undefined[]; 'a': number; }' is not assignable to type 'State'. Property 'arr' is inpatible with index signature. Type 'undefined[]' is not assignable to type 'number'.

Question:

Why is that ?
I don't understand the logic behind this restriction. What can I do to resolve it ?

I have an interface and a class :

export interface State {
    arr : any[];
}


export const INITIAL_STATE: State = {
    arr: []
};

This piles.

Now I'm chaning the Interface to be like :

export interface State {
    arr : any[];
    [key: string]: any
}

And the class to be like :

export const INITIAL_STATE: State = {
    arr: []    ,
    'a':2
};

- Still piles.

But now - If I want to be stricter in : [key: string]: any ---> [key: string]: number :

In other words :

export interface State {
    arr : any[];
    [key: string]: number
}


export const INITIAL_STATE: State = {
    arr: []    ,
    'a':2
};

I get an error :

Error:(7, 14) TS2322: Type '{ arr: undefined[]; 'a': number; }' is not assignable to type 'State'. Property 'arr' is inpatible with index signature. Type 'undefined[]' is not assignable to type 'number'.

Question:

Why is that ?
I don't understand the logic behind this restriction. What can I do to resolve it ?

• javascript
• typescript

• As soon as you have a string or number index signature, all explicit members must also conform to that index signature. In your case everything has to be a string. This is to provide safety, but you can support number and string index by using [key: string]: string | number; – Kokodoko Commented Dec 30, 2017 at 10:23
• @Kokodoko to tell you the truth - I don't understand And I don't see any potential problem . Would you mind posting an answer please ? – Royi Namir Commented Dec 30, 2017 at 10:30
• I bet thats because js objects should either have no dynamic properties, or they are used as a hashmap. – Jonas Wilms Commented Dec 30, 2017 at 10:44

1 Answer 1

The following interface:

export interface State {
    arr : any[];
    [key: string]: number
}

gives me the following error without even creating an object:

Property 'arr' of type 'any[]' is not assignable to string index type 'number'

This is because once you define [key: string]: number, TypeScript thinks all properties should be strings that map to a number. So you can't have an array unless you do:

export interface State {
    [key: string]: number | any[]
}

Note that the reason the following interface worked:

export interface State {
    arr : any[];
    [key: string]: any
}

is that [key: string]: any tells TypeScript "map a string to anything", in other words, "turn off type checking for each string property". That is why you can have arr : any[]; without error.