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

Question

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

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

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

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

Angular 版本和信息

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 13.0.3
Node: 16.13.0
Package Manager: npm 8.1.0
OS: win32 x64

Angular: 13.0.2
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1300.3
@angular-devkit/build-angular   13.0.3
@angular-devkit/core            13.0.3
@angular-devkit/schematics      13.0.3
@angular/cdk                    13.0.3
@angular/cli                    13.0.3
@angular/flex-layout            13.0.0-beta.36
@angular/material               13.0.3
@schematics/angular             13.0.3
rxjs                            6.6.7
typescript                      4.4.4

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

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"
...
            ]
...
}
...
}

Answer 3

检查您的安全上下文，因为 Wakelock 仅在启用 https 的情况下工作： https:// developer.mozilla.org/en-US/docs/Web/API/WakeLock