Dealing with a nested object problem in Angular using TypeScript

Question

Dealing with a nested object problem in Angular using TypeScript

I am currently working on an Angular 15 application that is designed to showcase information about different games to users.

Within the application, I have a global object structured like this:

GAMES_INFO: {
    skyroads: {
        name: 'Sky Roads',
        genre: GAMES_GENRES.action,
        year: 1993,
        wiki: 'https://en.wikipedia.org/wiki/SkyRoads_(video_game)',
    },
    prehistorik2: {
        name: 'Prehistorik 2',
        genre: GAMES_GENRES.arcade,
        year: 1993,
        wiki: 'https://en.wikipedia.org/wiki/Prehistorik_2',
    },
}

My goal is to display game data to the user once they select a specific game:

Currently, using

this.gameInfo = dic.GAMES_INFO['skyroads'];

works perfectly. However, I would like the user to input the game name like this:

this.gameInfo = dic.GAMES_INFO[gameName];

(where gameName is a string)

Attempting this approach results in the error message

TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type

.

Can anyone provide guidance on how to resolve this issue?

angular typescript

Answer 1

Answer №1

The reason is that the GAMES_INFO object keys are restricted to skyroads and prehistorik2, while the gameName can have any string value, making it more versatile.

You can choose one of these options:

Specify gameName with GAMES_INFO key list

let gameName: keyof typeof GAMES_INFO; // only keys of GAMES_INFO object are valid as values

// the following line will not work 
// since "hello world" is not a key in GAMES_INFO
gameName = 'hello world'; // Type '"hello world"' is not assignable to type '"skyroads" | "prehistorik2"'

gameName = 'prehistorik2'; // this will work

Convert GAMES_INFO type to any

gameInfo = (GAMES_INFO as any)[gameName];

Convert gameName type to key of GAMES_INFO

gameInfo = GAMES_INFO[gameName as keyof typeof GAMES_INFO];

If you need to get gameName from the user, ensure that you restrict the available choices to only GAMES_INFO keys and validate the user's selection:

if(gameName in GAMES_INFO){
    console.log('ok')
}else{
    console.log('error');
}

In summary, (1) type correctly, (2) limit user input options, and (3) validate the user's input.

Answer 2

The reason is that the GAMES_INFO object keys are restricted to skyroads and prehistorik2, while the gameName can have any string value, making it more versatile.

You can choose one of these options:

Specify gameName with GAMES_INFO key list

let gameName: keyof typeof GAMES_INFO; // only keys of GAMES_INFO object are valid as values

// the following line will not work 
// since "hello world" is not a key in GAMES_INFO
gameName = 'hello world'; // Type '"hello world"' is not assignable to type '"skyroads" | "prehistorik2"'

gameName = 'prehistorik2'; // this will work

Convert GAMES_INFO type to any

gameInfo = (GAMES_INFO as any)[gameName];

Convert gameName type to key of GAMES_INFO

gameInfo = GAMES_INFO[gameName as keyof typeof GAMES_INFO];

If you need to get gameName from the user, ensure that you restrict the available choices to only GAMES_INFO keys and validate the user's selection:

if(gameName in GAMES_INFO){
    console.log('ok')
}else{
    console.log('error');
}

In summary, (1) type correctly, (2) limit user input options, and (3) validate the user's input.

Answer 3

Answer №2

The reason for this issue is that when you attempt to access a property of an object in Typescript, it lacks the ability to iterate over the keys of that object.

A potential solution is to define your general object using an interface and then utilize

this.gameInfo = dic.GAMES_INFO[gameName as keyof ObjectType]; where ObjectType represents the interface's name.

However, if frequent additions and removals of keys/values are necessary, utilizing Map() is advisable.

In my personal opinion, working with a map is also more user-friendly.

For additional clarification, please refer to the mdn web docs:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

Answer 4

The reason for this issue is that when you attempt to access a property of an object in Typescript, it lacks the ability to iterate over the keys of that object.

A potential solution is to define your general object using an interface and then utilize

this.gameInfo = dic.GAMES_INFO[gameName as keyof ObjectType]; where ObjectType represents the interface's name.

However, if frequent additions and removals of keys/values are necessary, utilizing Map() is advisable.

In my personal opinion, working with a map is also more user-friendly.

For additional clarification, please refer to the mdn web docs:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

Dealing with a nested object problem in Angular using TypeScript

Answer №1

Answer №2

Similar questions

Utilizing Typescript and RequireJS for Incorporating jqueryui

How to use Angular2 Router to redirect a state to its default substate

Directive for multi-field validation in Angular 4 Template-Forms with ngModelGroup

What is the ternary operation syntax for setting the img src attribute in Angular 8?

Unable to allocate information in the subscribe method

Angular 12 isn't showing any providers available for HttpHeaders

Error Raised Due to Modification After Checking in Angular 2/Angular 5

Using Partial function input in TypeScript

The variance in module types within the tsconfig.json file

syncfusion export pdf demonstrating the toggle button's current state

Is there a way to view the console in a released apk?

AngularJS and CSS: A Guide to Effortlessly Toggle Sliding List Elements

Breaking up React code within the React.createElement() function

Tips for preventing words from being split between lines in an error message

Angular 2+ Service for tracking application modifications and sending them to the server

Is it possible to select a tab in Angular 10 Material Tabs based on a route parameter?

Guide to successfully passing a function as a prop to a child component and invoking it within Vue

problem encountered while attempting to drag and drop list elements on a web application utilizing dhtmlx 5.0 and wijmo grid

Having trouble retrieving the chosen option from a select box in Angular 8

Error message: While running in JEST, the airtable code encountered a TypeError stating that it cannot read the 'bind' property of an