Typescript encountering difficulty in accessing an array saved in sessionStorage

Question

Typescript encountering difficulty in accessing an array saved in sessionStorage

Imagine you have an array stored as a string in session storage, and you need to retrieve it, add an element, and then save it back.

trackNavHistory = (path: String) => {
    let historyArr : Array<String> = sessionStorage.getItem("navHistory")?.split(",");
    historyArr.push(path)
    sessionStorage.setItem(JSON.stringify(historyArr));
  }

The goal is to have historyArr as an array of strings fetched from sessionStorage.

However, the issue arises with the error message:

Type 'string[] | undefined' is not assignable to type 'String[]'.
Type 'undefined' is not assignable to type 'String[]'

This prevents setting the item back correctly.

An alternative attempt was made with the code snippet:

trackNavHistory = (path: String) => {
    let historyArr : Array<String> = JSON.parse(sessionStorage.getItem("navHistory"));
    historyArr.push(path)
    sessionStorage.setItem(JSON.stringify(historyArr));
  }

Argument of type 'string | null' is not assignable to parameter of type 'string'. Type 'null' is not assignable to type 'string'.ts(2345)

typescript

Answer 1

Answer №1

First and foremost, it is crucial that your getter and setter functions are inverse operations of each other - avoid manipulating the JSON data recklessly.

Furthermore, what you are experiencing is not a system "crash" but rather an error from the TypeScript compiler. TypeScript is simply pointing out that you need to handle cases where there might be no value present (the return type of getItem is string | null, while you require a string type).

To resolve this issue:

We begin by retrieving the session data.
We then ensure that the data is not null or undefined.
If we have valid data, we parse it and add it to an array.
Subsequently, we append the new path to this array, which could be empty if there was no previous session data.
Finally, we update the session data with the modified array.

const trackNavHistory = (path: String) => {
  const data = sessionStorage.getItem("navHistory");
  let historyArr = [];
  if (data) {
    historyArr = JSON.parse(data);
  }
  historyArr.push(path);
  sessionStorage.setItem("navHistory", JSON.stringify(historyArr));
}

Try it on TypeScript Playground

Answer 2

First and foremost, it is crucial that your getter and setter functions are inverse operations of each other - avoid manipulating the JSON data recklessly.

Furthermore, what you are experiencing is not a system "crash" but rather an error from the TypeScript compiler. TypeScript is simply pointing out that you need to handle cases where there might be no value present (the return type of getItem is string | null, while you require a string type).

To resolve this issue:

We begin by retrieving the session data.
We then ensure that the data is not null or undefined.
If we have valid data, we parse it and add it to an array.
Subsequently, we append the new path to this array, which could be empty if there was no previous session data.
Finally, we update the session data with the modified array.

const trackNavHistory = (path: String) => {
  const data = sessionStorage.getItem("navHistory");
  let historyArr = [];
  if (data) {
    historyArr = JSON.parse(data);
  }
  historyArr.push(path);
  sessionStorage.setItem("navHistory", JSON.stringify(historyArr));
}

Try it on TypeScript Playground

Answer 3

Answer №2

In typical TypeScript coding practice, the standard way to define a variable of type string is to use the keyword string with a lowercase initial letter.

It is recommended to utilize JSON.stringify before storing data in sessionStorage, and utilize JSON.parse to retrieve the array data from JSON format.

The variable historyArr is declared as an array that can only hold strings with the syntax

let historyArr : Array<String>

. However, since sessionStorage.getItem can return either a string or null, and JSON.parse(null) === null, TypeScript raises an error when trying to assign the result of this operation (

JSON.parse(sessionStorage.getItem("navHistory"));historyArr.push(path)

) to the historyArr variable.

A more effective approach would be:

const trackNavHistory = (path: string) => {
    let navHistory = sessionStorage.getItem('navHistory');

    if (!navHistory) {
        sessionStorage.setItem('navHistory', JSON.stringify([path]));
        return;
    }

    const historyArr: Array<string> = JSON.parse(navHistory);

    historyArr.push(path);

    sessionStorage.setItem('navHistory', JSON.stringify(historyArr));
};

Answer 4

In typical TypeScript coding practice, the standard way to define a variable of type string is to use the keyword string with a lowercase initial letter.

It is recommended to utilize JSON.stringify before storing data in sessionStorage, and utilize JSON.parse to retrieve the array data from JSON format.

The variable historyArr is declared as an array that can only hold strings with the syntax

let historyArr : Array<String>

. However, since sessionStorage.getItem can return either a string or null, and JSON.parse(null) === null, TypeScript raises an error when trying to assign the result of this operation (

JSON.parse(sessionStorage.getItem("navHistory"));historyArr.push(path)

) to the historyArr variable.

A more effective approach would be:

const trackNavHistory = (path: string) => {
    let navHistory = sessionStorage.getItem('navHistory');

    if (!navHistory) {
        sessionStorage.setItem('navHistory', JSON.stringify([path]));
        return;
    }

    const historyArr: Array<string> = JSON.parse(navHistory);

    historyArr.push(path);

    sessionStorage.setItem('navHistory', JSON.stringify(historyArr));
};

Typescript encountering difficulty in accessing an array saved in sessionStorage

Answer №1

Answer №2

Similar questions

TypeScript: Seeking a mechanism akin to ReturnType<...> that specifically targets the type of the initial function parameter

Ways to reset an input field when focused

The best approach for setting a select value and managing state in React using TypeScript

Is it possible to create a Cypress report that only includes the successful test cases and excludes the failed ones?

What is the method for importing styles in Next.js without including the file extension?

Tips for binding data to numerous dynamic controls

Encountering "Object is possibly undefined" during NextJS Typescript build process - troubleshooting nextjs build

Implementing conditional where clauses in Firestore queries with dynamic parameters

Tips for integrating a custom handler to the close icon in Material UI TextField component

Having trouble integrating jQuery into an Angular CLI project

Using React.Fragment in VS Code with TypeScript error 2605 while having checkJs enabled

After upgrading from Angular 13 to 14, the <app-root> component is failing to load. Despite no noticeable changes, the issue persists

Activating functions based on radio button selection in React with TypeScript

Utilizing String.Format in TypeScript similar to C# syntax

One issue that may arise is when attempting to use ngOnDestroy in Angular components while rearranging user transitions

Issue encountered when attempting to import a module within the ionic framework

React Redux Bundle with Hot Reload Feature

Navigating TS errors when dealing with child components in Vue and Typescript

When an input event is dispatched in a unit test, the value changes of a form are not activated

Multiple keyup events being triggered repeatedly