reactjs - Usar localStorage.getItem() con TypeScript

Tengo la siguiente línea de código:

const allGarments = teeMeasuresAverages || JSON.parse(localStorage.getItem("teeMeasuresAverages")) || teeMeasuresAveragesLocal;

Typescript lanza esta advertencia:

Argument of type 'string | null' is not assignable to parameter of type 'string'.
  Type 'null' is not assignable to type 'string'.

Entonces intenté incluir el operador de afirmación de no nulo (!):

const allGarments = teeMeasuresAverages || JSON.parse(localStorage.getItem("teeMeasuresAverages")) || teeMeasuresAveragesLocal;

Lo cual luego me da una advertencia diferente:

Forbidden non-null assertion.

Soy nuevo en TypeScript. ¿Qué está buscando aquí?

Respuesta #1

El tipo de dependencia de JSON.parse debe ser un string.

Pero el tipo de retorno de local storage es string|null, así que puede ser tanto string como null y cuando declaras los datos, su valor es null hasta que renderizas el componente (o llamas a la función) y luego llamas a la función getItem, obtiene el valor, y entonces es un string.

Puedes usar el operador || y agregarle una cadena para que ya no sea nulo.

JSON.parse(localStorage.getItem("teeMeasuresAverages") || '""') 

También puedes añadir // @ts-ignore para evitar que TypeScript verifique los tipos en la siguiente línea, pero no se recomienda

// @ts-ignore
JSON.parse(localStorage.getItem("teeMeasuresAverages"))//just the usual way 

Respuesta #2

JSON.parse espera string como primer argumento

JSON.parse(text: string, reviver?: ((this: any, key: string, value: any) => any) | undefined): any

Cuando localStorage devuelve string | null.

const value = localStorage.getItem("teeMeasuresAverages") // string | null

Si quieres hacer feliz a TS, solo verifica si value es una cadena

const value = localStorage.getItem("teeMeasuresAverages")

if (typeof value === 'string') {
    const parse = JSON.parse(value) // ok

}