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

The UploadFile Interface seems to be missing

What is the appropriate typescript type for an array payload when using the fetch API?

Tips for picking out a particular item from a list of child elements

Achieving a similar functionality to Spring Security ACL in a Node.js AWS Lambda serverless environment

Unable to locate 'reflect-metadata' module within Docker container on Production Server

Using Typescript types or a linter can help avoid mistakenly rendering the raw function in JSX instead of its executed return value

Sending a CSS class to an Angular library

Understanding the contrast between a put request subscription with an arrow versus without in Typescript

What is the best way to retrieve a nested data type?

Mapping an array of Type T in Typescript using typings

Tips for efficiently utilizing Hooks with React Context:

Guidelines for creating a binary release of Node.js with native modules

Having trouble incorporating a variable into the Discord Client object in Typescript

Angular's text interpolation fails to update when a value is changed by an eventListener

Implementing Material Design in React using TypeScript

Unable to choose Typescript as a programming language on the VSCode platform

The subscriber continues to run repeatedly, even after we have removed its subscription

Encountering a Problem with HTTP Requests in Angular 2

What is the purpose of the .default() method being added to the class constructor in transpiled Typescript code

Developing a versatile table component for integration