Error encountered: The property 'localStorage' is not found on the 'Global' type

Question

Error encountered: The property 'localStorage' is not found on the 'Global' type

Calling all Typescript enthusiasts! I need help with this code snippet:

import * as appSettings from 'application-settings';

try {
    //  shim the 'localStorage' API with application settings module 
    global.localStorage = {
        getItem(key: string) {
            return appSettings.getString(key);
        },
        setItem(key: string, value: string) {
            return appSettings.setString(key, value); 
        }
    }

    application.start({ moduleName: 'main-page' });
}
catch (err) {
    console.log(err);
}

I'm getting an error in VSCode that says

[ts] Property 'localStorage' does not exist on type 'Global'. [2339]

. Any suggestions on how to resolve this issue?

This code is for a Nativescript app. You can view the entire file/app here for reference: https://github.com/burkeholland/nativescript-todo/blob/master/app/app.ts

typescript nativescript

Answer 1

Answer №1

When using TypeScript, it's common to encounter issues with the global typings not including localStorage, resulting in it being flagged as an invalid property.

To resolve this error, you can simply cast it to any:

(<any>global).localStorage = {
    getItem(key: string) {
        return appSettings.getString(key);
    },
    setItem(key: string, value: string) {
        return appSettings.setString(key, value); 
    }
}

Alternatively, you have the option to extend the global typings from references.d.ts, typically found in your project root directory. If it doesn't exist, you can create one yourself:

declare namespace NodeJS {
    interface Global {
        localStorage: { getItem: (key: string) => any; setItem: (key: string, value: string) => any; };
    }
}

Answer 2

When using TypeScript, it's common to encounter issues with the global typings not including localStorage, resulting in it being flagged as an invalid property.

To resolve this error, you can simply cast it to any:

(<any>global).localStorage = {
    getItem(key: string) {
        return appSettings.getString(key);
    },
    setItem(key: string, value: string) {
        return appSettings.setString(key, value); 
    }
}

Alternatively, you have the option to extend the global typings from references.d.ts, typically found in your project root directory. If it doesn't exist, you can create one yourself:

declare namespace NodeJS {
    interface Global {
        localStorage: { getItem: (key: string) => any; setItem: (key: string, value: string) => any; };
    }
}

Error encountered: The property 'localStorage' is not found on the 'Global' type

Answer №1

Similar questions

Stopping the subscription to an observable within the component while adjusting parameters dynamically

Angular2, multi-functional overlay element that can be integrated with all components throughout the application

Creating an object instance in Angular 2 using TypeScript

What is the syntax for typing the router instance in Next.js?

Steps for reinstalling TypeScript

Arrangement of items in Angular 2 array

What is the best way to synchronize API definitions between the server and client using TypeScript?

Tips on excluding node_modules from typescript in Next.js 13

A guide to submitting forms within Stepper components in Angular 4 Material

Filter multiple columns in an Angular custom table with a unique filterPredicate

Exploring Angular2's DOMContentLoaded Event and Lifecycle Hook

The server has access to an environment variable that is not available on the client, despite being properly prefixed

Apply a CSS class once a TypeScript function evaluates to true

Tips on implementing npm's node-uuid package with TypeScript

Angular - Electron interface fails to reflect updated model changes

Generate a dynamic key object in Angular/TypeScript

How can data be transferred between controllers in Angular 2 without using URL parameters or the $state.go() function?

Creating a sidebar in Jupyter Lab for enhanced development features

What is the method for utilizing enum values as options for a variable's available values?

What is the best way to display the arrows on a sorted table based on the sorting order in Angular?