属性 '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

如何修复打字稿以包含屏幕唤醒锁定API并且可以编译代码？

Answer 1

这就是我为让它发挥作用所做的工作：

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

我首先尝试添加修复编辑器抛出错误的 DefinitelyTyped 定义，但它仍然导致编译失败。这样就成功了，基本上我们将导航器保存到一个任意类型的变量中，这样我们就可以在不进行类型检查的情况下调用任何属性或方法。

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

Answer 2

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

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

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

2. 安装包后，您必须像这样 tsconfig.json 添加类型

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