What is the solution to the error message "Property 'permissions' is not found on type 'Navigator'"?

Question

What is the solution to the error message "Property 'permissions' is not found on type 'Navigator'"?

After being in draft form for a period of time, the permissions API now appears to be well supported. However, TypeScript still throws an error

Property 'permissions' does not exist on type 'Navigator'

when encountering code like:

if (navigator.permissions) { 
    /* code */
}

or

navigator.permissions.query({name:'geolocation'})
    .then((result) => {
        /* code */
    })

What is the best way to handle this issue in an Angular 7+ application?

Here's a glimpse into my current tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "resolveJsonModule": true,
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "types": [
      "node"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

angular typescript browser

Answer 1

Answer №1

To keep it simple, just utilize the declare keyword

While you have the option to craft custom type declarations for your project, considering that this is a global variable specific to browsers, keeping things straightforward with Typescript's declare keyword might be more practical and easier for your team members to grasp. By using declare, you inform the compiler that you're working with an existing variable, object, or library and defining its type.

For instance, within an Angular component, employing the declare keyword lets Typescript understand that utilizing properties from a global variable (such as navigator) is acceptable:

import { Component, OnInit } from '@angular/core';
...

declare const navigator: any;  // Add this line of declaration

@Component({
  selector: 'my-component',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.css'],
})
...

if (navigator.permissions) {   // Typescript approves
  ...
}

Further reading can be found at:

Typescript Docs: Working with Other JavaScript Libraries
Purpose of declare keyword in TypeScript

Answer 2

To keep it simple, just utilize the declare keyword

While you have the option to craft custom type declarations for your project, considering that this is a global variable specific to browsers, keeping things straightforward with Typescript's declare keyword might be more practical and easier for your team members to grasp. By using declare, you inform the compiler that you're working with an existing variable, object, or library and defining its type.

For instance, within an Angular component, employing the declare keyword lets Typescript understand that utilizing properties from a global variable (such as navigator) is acceptable:

import { Component, OnInit } from '@angular/core';
...

declare const navigator: any;  // Add this line of declaration

@Component({
  selector: 'my-component',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.css'],
})
...

if (navigator.permissions) {   // Typescript approves
  ...
}

What is the solution to the error message "Property 'permissions' is not found on type 'Navigator'"?

Answer №1

Similar questions

My application is experiencing issues due to a malfunction when refreshing with query parameters in Angular 2

Opting out of notifications using Angular's NGXS

"Despite the inability to use the clear input field function in Angular, users can still effectively clear

Having trouble locating the 'tsc-watch' module due to the missing 'typescript/bin/tsc' when running the TypeScript compiler

Rollup bundling with Typescript and troublesome rollup-plugin-typescript2 experience

Is there a way to retrieve the value of an option passed by serverless CLI in serverless.ts file?

Implement a call feature using ReactJS

angular restore reactive form

Utilize Azure Functions: Employ the Apollo Azure handler within an asynchronous function

Tips for implementing a hover effect across the entire line in a line chart using Chart.js

Encountered an issue with Angular 8 Firebase where an error was thrown at node_modules/firebase/index.d.ts(4369, 38): TS1005 error - expecting a sem

Tips for dynamically binding the image source in Angular based on certain conditions

Locating a record based on specific criteria

What is the interaction between a service worker and a sub-domain?

Adding JavaScript files to a project in Ionic2 with Angular2 integration

Getting the result from a callback function in TypeScript

Dealing with challenges when using NgModel and [checked] with a radio input

Error encountered in Angular: FormBuilder provider not found

Attempting to eliminate any dates that have already occurred

Navigate to a specific line in Vscode once a new document is opened