Свойство «wakeLock» не существует для типа «Навигатор»

Мне нужно использовать API Screen Wake Lock в моем угловом приложении
вот мой код

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 и мог компилировать коды?

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
0
42
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вот что я сделал, чтобы заставить его работать:

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

Сначала я попытался добавить определение DefinitelyTyped, которое исправило ошибки редактора, но это все еще приводило к сбою компиляции. Это помогло, в основном мы сохраняем навигатор в переменной любого типа, что позволяет нам вызывать любые свойства или методы без проверки типа.

Оператор if позволяет проверить, поддерживается ли wakelock браузером, прежде чем пытаться его вызвать.

Ответ принят как подходящий

Наконец, через две недели я нашел способ, который поддерживает это, добавив класс DefinitelyTyped. Двухшаговый режим может это исправить.

  1. Установите пакет @types/dom-screen-wake-lock
npm i @types/dom-screen-wake-lock -D
  1. После установки пакета вы должны добавить типы в tsconfig.json вот так
{
...
   "compilerOptions":{
...
         "types":[
...
              "dom-screen-wake-lock"
...
            ]
...
}
...
}

Если у кого-то есть лучший способ, пожалуйста, опубликуйте его. спасибо

behroozbc 08.04.2022 07:43

Другие вопросы по теме