an create type using key in enum has implicitly 'any' problem [angular]

Question

Why does the key of [type] need a type? It's really weird to say that, but I have a problem.

data example:

export enum ENUM_Bike {
 suzuki   = 'suzuki',
 yamaha   = 'yamaha',
 kawasaki = 'kawasaki'
}

export type TBike_StringMapping = { [key in ENUM_Bike]: string };

export const CONST_BikeIconName: Readonly<TBike_StringMapping> = {
 suzuki   : 'icon_a',
 yamaha   : 'icon_b',
 kawasaki : 'icon_c',
}

export const CONST_BikeIconColor: Readonly<TBike_StringMapping> = {
 suzuki   : '#111',
 yamaha   : '#222',
 kawasaki : '#333',
}

using

<mat-icon
 *ngFor="let item of CONST_BikeIconName | keyvalue: orderByJson"
 [ngStyle]="{'background-color': CONST_BikeIconColor[item.key] }">
    {{ item.value }}
</mat-icon>

I have been using it like this, but now it appears

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Readonly<TBike_StringMapping>'. No index signature with a parameter of type 'string' was found on type 'Readonly<TBike_StringMapping>'.ts(7053)

I found a discussion, but it can't solve my problem. I need type not interface. Can anyone help me? thanks for the help.

TypeScript TS7015 error when accessing an enum using a string type parameter

Edit to Rachid O: there has same example here, and same error

error example on typescriptlang.org

are you sure of the problem ? I don't see any errors. What version of Angular Material are you using ? — Rachid O
– Rachid O, Commented Jan 20, 2021 at 9:38
it's really problem, please see my edited supplementary note, there has online typescript example — Pork Jackson
– Pork Jackson, Commented Jan 20, 2021 at 9:48

Rachid O · Accepted Answer · 2021-01-20 12:01:05Z

1

one quick solution for this problem would be to exactly do what the compiler suggests and add an intermediate type that has an index signature like so :

export interface TBike_StringMappingExtended extends TBike_StringMapping {
    [key: string]:string
}

this will give :

export enum ENUM_Bike {
 suzuki   = 'suzuki',
 yamaha   = 'yamaha',
 kawasaki = 'kawasaki'
}

export type TBike_StringMapping = Record<ENUM_Bike, string>;

export interface TBike_StringMappingExtended extends TBike_StringMapping {
    [key: string]:string
}

export const CONST_BikeIconName: TBike_StringMappingExtended = {
 suzuki   : 'icon_a',
 yamaha   : 'icon_b',
 kawasaki : 'icon_c',
}

export const CONST_BikeIconColor: TBike_StringMappingExtended = {
 suzuki   : '#111',
 yamaha   : '#222',
 kawasaki : '#333',
}

for (let key in CONST_BikeIconName) {
    if (key) {
    const element = CONST_BikeIconColor[key];
    }
}

answered Jan 20, 2021 at 12:01

Rachid O

14.3k16 gold badges73 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pork Jackson Over a year ago

Great answer, this gave me a new understanding of the usage of types and interfaces. In addition, I found that if I use value as an index in the loop of html, the error will not appear.

Pork Jackson Over a year ago

If use your solution, no matter whether use key or value as an index in the html loop, no error will occur.

Collectives™ on Stack Overflow

an create type using key in enum has implicitly 'any' problem [angular]

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related