打字稿类型 BeforeInstallPromptEvent答案

【问题标题】：Typescript type BeforeInstallPromptEvent打字稿类型 BeforeInstallPromptEvent
【发布时间】：2018-07-24 16:44:00
【问题描述】：

在使用beforeinstallprompt 事件时我应该使用什么样的类型？

我尝试了BeforeInstallPromptEvent 类型，但给了我一个错误：

export class PwaService {
  //promptEvent: BeforeInstallPromptEvent;
  promptEvent;
  constructor(private swUpdate: SwUpdate, platform: PlatformService) {
    if(platform.isBrowser()){
      swUpdate.available.subscribe(event =>  {
        /*if (askUserToUpdate()) {
          window.location.reload();
        }*/
      });
      window.addEventListener('beforeinstallprompt', event => {
        this.promptEvent = event;
      });
    }
  }

  install(): void {
    if(this.promptEvent){
      this.promptEvent.prompt();
    }
  }
}

【问题讨论】：

我正在BeforeInstallPromptEvent 上审查MDN's docs，在我看来，userChoice 返回的 Promise 并没有提供一个 Object 作为它的参数。但是，Google Developers - Web Fundamentals 将类型记录为如上所述。如果我能找到一些明确的问题，我一定会记录下来。

标签： angular typescript service-worker progressive-web-apps

【解决方案1】：

BeforeInstallPromptEvent 是一个非标准的 Web API，目前只有 Chrome 和 Android 支持。我什至不确定 Google 是否认为它稳定，但无论哪种情况，我都不希望很快在 TypeScript DOM 库中看到正式的类型定义。

但是您可以自己定义类型，例如在 .d.ts 文件中。我使用下面的定义（来自MDN 的cmets），这在Chrome 68 中似乎足够准确。

/**
 * The BeforeInstallPromptEvent is fired at the Window.onbeforeinstallprompt handler
 * before a user is prompted to "install" a web site to a home screen on mobile.
 *
 * @deprecated Only supported on Chrome and Android Webview.
 */
interface BeforeInstallPromptEvent extends Event {

  /**
   * Returns an array of DOMString items containing the platforms on which the event was dispatched.
   * This is provided for user agents that want to present a choice of versions to the user such as,
   * for example, "web" or "play" which would allow the user to chose between a web version or
   * an Android version.
   */
  readonly platforms: Array<string>;

  /**
   * Returns a Promise that resolves to a DOMString containing either "accepted" or "dismissed".
   */
  readonly userChoice: Promise<{
    outcome: 'accepted' | 'dismissed',
    platform: string
  }>;

  /**
   * Allows a developer to show the install prompt at a time of their own choosing.
   * This method returns a Promise.
   */
  prompt(): Promise<void>;

}

【讨论】：

别忘了interface WindowEventMap { "beforeinstallprompt": BeforeInstallPromptEvent; } 可能还需要把它放在declare global {} 块中。
还是这样吗？

【解决方案2】：

别忘了您还需要在WindowEventMap 中添加一个密钥：

interface BeforeInstallPromptEvent extends Event {
  readonly platforms: string[];
  readonly userChoice: Promise<{
    outcome: "accepted" | "dismissed";
    platform: string;
  }>;
  prompt(): Promise<void>;
}

declare global {
  interface WindowEventMap {
    beforeinstallprompt: BeforeInstallPromptEvent;
  }
}

window.addEventListener("beforeinstallprompt", (e) => {}); // e is now typed

注意declare global {} 是一个用于在代码中输入全局内容的包装器。如果您在不存在 import/export 关键字的环境 .d.ts 文件中执行此操作，则不需要包装器。

【讨论】：