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

Ways to retrieve the length of the parent array within a component in AngularJS

Unlocking the potential of deeply nested child objects

Is there a method available that functions akin to document.getelementbyid() in this specific scenario?

Issue encountered while deploying Next.js application on vercel using the replaceAll function

Angular and Bootstrap project with an advanced dropdown menu featuring multiple levels

Effortlessly control your CSS within extensive Angular 2/4/5 projects

Modify the innerHTML to adjust font size when a button is clicked in Ionic 5, or eliminate any unnecessary spaces

Executing the plugin-typescript library within an Angular 2 project hosted on localhost

Is it possible to globally define a namespace in Typescript?

Testing an event within a subscription in Angular 4: A step-by-step guide

Updating part of an object using TypeScript

Creating an Object Type from a String Union Type in TypeScript

You are unable to compile a module in Visual Studio Code unless you provide the --module flag

unable to see the new component in the display

A guide to testing the mui Modal onClose method

What is the best way to generate a switch statement based on an enum type that will automatically include a case for each enum member?

Tips for sorting multiple rows based on the primary column in MUI DataGrid ReactJS

Finding the file path to a module in a NextJS application has proven to be a challenge when utilizing the module

Having trouble linking tables to Node.js with TypeScriptyntax?

Is it possible that a declaration file for module 'material-ui/styles/MuiThemeProvider' is missing?