creating a custom type with enums in Angular can lead to implicit 'any' issues

Question

creating a custom type with enums in Angular can lead to implicit 'any' issues

Why does the key of [type] require a type? It may sound strange, but I am facing an issue.

Here is some example data:

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',
}

Implementation

<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 this method, but now I encountered an issue

Element implicitly has an 'any' type because expression of type 'string' cannot 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 came across a discussion, but it wasn't able to resolve my problem. I specifically need a type, not an interface. Can someone provide assistance? Thank you for your help.

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

Edit to Rachid O: There is a similar example and error here as well

error example on typescriptlang.org

javascript angular typescript

Answer 1

Answer №1

If you're looking for a quick fix to this issue, one approach would be to follow the compiler's advice and introduce an intermediate type with an index signature like this:

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

By doing this, you will achieve the following result:

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];
    }
}

Answer 2

If you're looking for a quick fix to this issue, one approach would be to follow the compiler's advice and introduce an intermediate type with an index signature like this:

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

By doing this, you will achieve the following result:

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];
    }
}

creating a custom type with enums in Angular can lead to implicit 'any' issues

Answer №1

Similar questions

The interface does not allow properties to be assigned as string indexes

Substitute the division

Error: The React component throws a TypeError because it is unable to read the property 'map' from an undefined source

What is the best way to show mat-select choices above a dialog box?

What is the reason behind having several node modules directories within every project?

Translating coordinates into their corresponding location on the chart

I am experiencing an issue where the Ajax/Javascript functionality is unresponsive on my homepage

Explore the data within nested children using vuejs and javascript in order to display information

Workspace Settings cannot be saved due to an unregistered configuration

The 'ref' attribute is not found within the 'IntrinsicAttributes' type

Struggling with loading.jsx file in next js version 13.4.5?

Encountering an Internal Server error with Mongoose in Node.js

Having trouble setting the default value of a select element with 'selected' in Angular's bootstrap?

What is the best way to ensure the options/choices div reaches its ideal width?

An unexpected error occurred with React JS stating: "Parse Error: Line 27: Unexpected token . at http://localhost/PHP-React-Demo/ajax_call.html return {cell.data.row}"

Learn how to showcase a predetermined option in an HTML select element using Vue.js and Minimalect

The carousel control in Bootstrap-material-design is working intermittently but encountering a zone-aware error

Issue with retrieving authentication object from service within resolve function in AngularJS

Variety of hues present on the mesh surface facing the plane

The variable is unable to transfer successfully from JavaScript to PHP using ajax