类型“Navigator”上不存在属性“wakeLock”

Question

我需要在我的角度应用程序中使用屏幕唤醒锁定 API
\n这是我的代码

\n

if ('wakeLock' in navigator) {\n         await navigator.wakeLock.request();\n        \n}\n

\n

但是，Angular 编译失败并出现以下错误：

\n

Error: src/app/feature/test/test/test.component.ts:20:42 - error TS2339: Property 'wakeLock' does not exist on type 'Navigator'.\n

\n

Angular 版本和信息

\n

     _                      _                 ____ _     ___\n    / \\   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|\n   / \xe2\x96\xb3 \\ | '_ \\ / _` | | | | |/ _` | '__|   | |   | |    | |\n  / ___ \\| | | | (_| | |_| | | (_| | |      | |___| |___ | |\n /_/   \\_\\_| |_|\\__, |\\__,_|_|\\__,_|_|       \\____|_____|___|\n                |___/\n    \n\nAngular CLI: 13.0.3\nNode: 16.13.0\nPackage Manager: npm 8.1.0\nOS: win32 x64\n\nAngular: 13.0.2\n... animations, common, compiler, compiler-cli, core, forms\n... language-service, platform-browser, platform-browser-dynamic\n... platform-server, router\n\nPackage                         Version\n---------------------------------------------------------\n@angular-devkit/architect       0.1300.3\n@angular-devkit/build-angular   13.0.3\n@angular-devkit/core            13.0.3\n@angular-devkit/schematics      13.0.3\n@angular/cdk                    13.0.3\n@angular/cli                    13.0.3\n@angular/flex-layout            13.0.0-beta.36\n@angular/material               13.0.3\n@schematics/angular             13.0.3\nrxjs                            6.6.7\ntypescript                      4.4.4\n

\n

如何修复 typescript 以包含 Screen Wake Lock API 并可以编译代码？

\n

Answer 1

这就是我为使其发挥作用所做的事情：

const anyNav: any = navigator
if ('wakeLock' in navigator) {
  anyNav["wakeLock"].request("screen")
}

我首先尝试添加 DefinelyTyped 定义，该定义修复了编辑器抛出的错误，但它仍然导致编译失败。这成功了，基本上我们将导航器保存到任何类型变量，这允许我们调用任何属性或方法而无需类型检查。

if 语句允许在尝试调用唤醒锁之前检查浏览器是否支持唤醒锁。

Answer 2

最后，两周后我找到了一种通过添加DefinitelyTyped来支持这一点的方法。两步可以解决这个问题。

1. 安装@types/dom-screen-wake-lock包

npm i @types/dom-screen-wake-lock -D

2. 安装软件包后，您必须添加类型，tsconfig.json如下所示

{
...
   "compilerOptions":{
...
         "types":[
...
              "dom-screen-wake-lock"
...
            ]
...
}
...
}