The element is implicitly given an 'any' type due to the fact that a string expression cannot be used to index the following type: { "1" : { "key": string}; "2" : { "key": string};}

Question

The element is implicitly given an 'any' type due to the fact that a string expression cannot be used to index the following type: { "1" : { "key": string}; "2" : { "key": string};}

I have a JSON file containing IDs as keys like this:

"1" : { "key": "value"},
"2" : { "key": "value"},

In my class, I import this JSON file as a data object and then use the ID passed to a method to retrieve the corresponding object, as shown below:

getData = (id: string) {
  this.temp = data[id]
}

However, I am encountering the following error message. While it does not cause any runtime issues, it is hindering my unit testing and showing up as an error in my editor.

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type {"1" : { "key": string};
"2" : { "key": string};}

typescript

Answer 1

Answer №1

If you want to ensure that only the key is passed as a prop to the object, you can use the following approach:

func = (key: keyof typeof data) {
    this.temp = data[key];
}

Alternatively, if you explicitly type your data object as an object, all props will be assumed available. However, without proper context in your question, assumptions are being made:

func = (key: string, data: object) {
    this.temp = data[key];
}

A better practice would be to type the data as unknown, which would require explicit casting to a defined type (matching the shape of your JSON as closely as possible) using casting or type guards. You can refer to: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-0.html#new-unknown-top-type

Answer 2

If you want to ensure that only the key is passed as a prop to the object, you can use the following approach:

func = (key: keyof typeof data) {
    this.temp = data[key];
}

Alternatively, if you explicitly type your data object as an object, all props will be assumed available. However, without proper context in your question, assumptions are being made:

func = (key: string, data: object) {
    this.temp = data[key];
}

A better practice would be to type the data as unknown, which would require explicit casting to a defined type (matching the shape of your JSON as closely as possible) using casting or type guards. You can refer to: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-0.html#new-unknown-top-type

The element is implicitly given an 'any' type due to the fact that a string expression cannot be used to index the following type: { "1" : { "key": string}; "2" : { "key": string};}

Answer №1

Similar questions

The absence of transpiled Typescript code "*.js" in imports

Endlessly streaming data is requested through HTTP GET requests

useEffect does not trigger a rerender on the primary parent component

Tips on displaying hyperlinks within a text area in an Angular application

Tips for inserting an HTML element within an exported constant

Advantages of Using Constructor Parameter Initialization Over the new Keyword in Angular 5

Ensure that the value of a variable in the Ionic/Angular template has been properly initialized

Issue with applying value changes in Timeout on Angular Material components

What causes the appearance of the "?" symbol at the beginning of the URL and triggers a reboot of the app when moving through the absolute path?

When utilizing await/async in TypeScript with Axios, the return type may be incorrect

What is the best way to include multiple targets/executables within a single Node.js repository?

When attempting to utilize class validators in NestJS, Param is refusing to cast to DTO type

Designing the File and Folder Organization for Next.js Frontend and AWS Cloud Development Kit (CDK) Backend

Encountering the error message 'array expected for services config' within my GitLab CI/CD pipeline

What is the reason for the lack of functionality of the "unique" field when creating a schema?

What is the best way to delegate the anonymous function logic contained within the subscribe() method?

Achieve a seamless redirection to the 404 component in Angular without altering the browser URL, while ensuring that the browsing

Puppeteer: implementing wait timeout is crucial to successfully handle Auth0 login process

Metamorphosed Version.execute SourceText and TypeScript Writer

What is the best way to declare only a portion of a JavaScript module?