angular - 如何修复类型 'permissions' 上不存在属性 'Navigator' ？

Question

虽然权限 API 还处于草案状态一段时间，但现在似乎得到了很好的支持。但 typescript 仍然给出属性'permissions'在类型'Navigator'上不存在。代码错误如下:

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

或

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

如何在 Angular 7+ 应用程序中处理此问题？

这是我当前的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"
    ]
  }
}

Answer 1

最简单的答案是使用declare

可以为您的应用程序编写自定义类型声明，但由于这是一个全局浏览器变量，并且不会成为您的应用程序代码的一部分，因此更简单的路径可能对团队中的其他工程师更可持续和更容易理解。通过利用 Typescript declare 关键字，您可以通知编译器您正在使用现有变量、对象或库并指定其类型。

因此，对于 Angular 组件，declare 关键字可用于告诉 Typescript 全局变量(如 navigator)上的属性是可以的:

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

declare const navigator: any;  // This is the declaration you add

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

if (navigator.permissions) {   // Typescript is happy now
  ...
}

更多信息:

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