angular - 类型 'wakeLock' 上不存在属性 'Navigator'

Question

我需要在我的 Angular 应用中使用 Screen Wake Lock 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

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

Answer 1

这就是我为让它工作所做的:

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

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

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