Use Typescript to access and utilize the value stored in local storage by using the

Question

Use Typescript to access and utilize the value stored in local storage by using the

Trying to retrieve the language setting from localHost and implement it in a translation pipe as shown below:

transform(value: string): string {...

localStorage.setItem("language", JSON.stringify("en"));

let language = JSON.parse(localStorage.getItem("language") ?? "en");

language = language as keyof typeof translates[number];

const translates: {
      key: string;
      cz: string;
      en: string;
    }[]

let returnTranslate = "";

    translates.forEach((item) => {
      if (item["key"] === value) {
        returnTranslate = item[language];
      }
    });

Encountering an error message stating:

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

This problem occurs in the following part of the code:

item[language]

angular typescript

Answer 1

Answer №1

The TypeScript compiler is throwing errors because you are attempting to use a type that is inferred as any.

But why is your language variable being treated as any? This happens because of the initial assignment.

let language = JSON.parse(localStorage.getItem("language") ?? "en");
// Here, 'language' is considered as type any

In this block of code, using as helps in explicitly defining the type:

language = language as keyof typeof translates[number];

While using as temporarily informs the compiler about the forced type, using the language variable (which is still of type any) as an index later in the code results in compilation errors.

Instead, you should specify the type explicitly where you intend to use the language as the index:

returnTranslate = item[language as keyof typeof translates[number]];

To simplify this process and ensure that your language variable is always of type keyof typeof translates[number], you can adjust it at the start:

let language = JSON.parse(localStorage.getItem("language") ?? "en") as keyof typeof translates[number];

This modification eliminates the need for the line

language = language as keyof typeof translates[number];

.

Try running this example on the TypeScript playground

Answer 2

The TypeScript compiler is throwing errors because you are attempting to use a type that is inferred as any.

But why is your language variable being treated as any? This happens because of the initial assignment.

let language = JSON.parse(localStorage.getItem("language") ?? "en");
// Here, 'language' is considered as type any

In this block of code, using as helps in explicitly defining the type:

language = language as keyof typeof translates[number];

While using as temporarily informs the compiler about the forced type, using the language variable (which is still of type any) as an index later in the code results in compilation errors.

Instead, you should specify the type explicitly where you intend to use the language as the index:

returnTranslate = item[language as keyof typeof translates[number]];

To simplify this process and ensure that your language variable is always of type keyof typeof translates[number], you can adjust it at the start:

let language = JSON.parse(localStorage.getItem("language") ?? "en") as keyof typeof translates[number];

This modification eliminates the need for the line

language = language as keyof typeof translates[number];

.

Try running this example on the TypeScript playground

Use Typescript to access and utilize the value stored in local storage by using the

Answer №1

Similar questions

What is the best way to retrieve all the keys from an array?

What is the reason behind TypeScript's decision not to raise an error in case of a mismatched function argument type?

The Angular-Chart.js chart fails to display when data is automatically inserted

What is the correct way to utilize Global Variables in programming?

What sets Angular 2 apart when it comes to utilizing [ngStyle] versus [style.attribute]?

Can a VS Code theme extension be designed using JavaScript or TypeScript rather than JSON?

What causes Angular2 to detect both reference changes and primitive changes even when the OnPush flag is enabled?

Data fetched by Next.js is failing to display on the web page

Tips for testing nested subscribe methods in Angular unit testing

Trouble with displaying cell content in ag-grid within an Angular application

The @Hostlistener method consistently returns an 'undefined' value when passing in the @Input() value

Retrieving information from the Dog API using axios and storing the results in a fresh array

What happens when a template reference variable is used more than once in a template?

Why is the `node-config` configuration undefined within a TypeScript Jest environment?

Tips for implementing debounce functionality in mui Autocomplete

What is the best way to decide on a method's visibility depending on who is calling

"The debate over using 'stringly typed' functions, having numerous redundant functions, or utilizing TypeScript's string enums continues to divide the programming

Using TypeScript to asynchronously combine multiple Promises with the await keyword

Creating an Angular FormControl that can toggle multiple buttons

The performance of ternary operators in Typescript-based Reactjs fell short of my expectations