TypeScript 和 Chrome 通知

Question

我正在构建一个 Chrome 应用程序。该应用程序是使用 TypeScript (Angular2) 编写的。

我想推送通知。这是代码：

import {Injectable} from 'angular2/core';

@Injectable()
export class NotificationService {
    constructor() {
        if(Notification.permission !== 'granted') {
            Notification.requestPermission();
        }
    }
}

当 gulp 构建应用程序时，它说：

src/scripts/stream/notification.service.ts(6) Cannot find name 'Notification'.

我试着把我的 class 包在里面 :

/* tslint:disable */
... the code
/* tslint:enable */

但这并没有改变任何东西。

有没有办法通过 tslint.json 文件告诉 Typescript 这是一个全局变量？

使用 jshint 会是这样的：

"globals": {
   "Notification": false
}

Answer 1

您似乎缺少 Chrome 的类型定义。

您可以使用 tsd 工具安装它们。

首先你需要安装tsd.

$ npm install tsd -g

然后您可以使用它在您的项目中安装 Chrome 的类型定义。

$ tsd install chrome

您可以在 tsd here.

上找到更多信息

注意：确保您只为一个库定义了 1 个 tsd 文件。

Answer 2

这里有几个选项：

将以下行添加到文件的顶部。

声明变量通知：任何；

这将使转译器通过，但不会为您提供 TypeScript 的大部分功能。
下载定义类型(chrome.d.ts).

TSD 似乎是最受欢迎的定义管理器。
Typings 是另一个有前途的选择。

Answer 3

我还没有找到通知 API 的 d.ts 文件，但我发现了一个小技巧。

if("Notification" in window){
   let _Notification = window["Notification"];
}

_Notification 将具有与 Notification 相同的属性，并且可以相同地使用。这将解决 TypeScript 中的任何错误。

Answer 4

可通过此 GitHub TypeScript issue;

获得通用类型文件

创建一个名为 notification.d.ts 的新类型定义文件并添加以下代码。

type NotificationPermission = "default" | "denied" | "granted";

type NotificationDirection = "auto" | "ltr" | "rtl";

interface NotificationPermissionCallback {
    (permission: NotificationPermission): void;
}

interface NotificationOptions {
    dir?: NotificationDirection;
    lang?: string;
    body?: string;
    tag?: string;
    image?: string;
    icon?: string;
    badge?: string;
    sound?: string;
    vibrate?: number | number[],
    timestamp?: number,
    renotify?: boolean;
    silent?: boolean;
    requireInteraction?: boolean;
    data?: any;
    actions?: NotificationAction[]
}

interface NotificationAction {
    action: string;
    title: string;
    icon?: string;
}

declare class Notification extends EventTarget {
    constructor(title: string, options?: NotificationOptions);

    static readonly permission: NotificationPermission;
    static requestPermission(): Promise<NotificationPermission>;
    static requestPermission(deprecatedCallback: (permission: NotificationPermission) => void): void;

    static readonly maxActions: number;

    onclick: EventListenerOrEventListenerObject;
    onerror: EventListenerOrEventListenerObject;

    close(): void;

    readonly title: string;
    readonly dir: NotificationDirection;
    readonly lang: string;
    readonly body: string;
    readonly tag: string;
    readonly image: string;
    readonly icon: string;
    readonly badge: string;
    readonly sound: string;
    readonly vibrate: number[];
    readonly timestamp: number;
    readonly renotify: boolean;
    readonly silent: boolean;
    readonly requireInteraction: boolean;
    readonly data: any;
    readonly actions: NotificationAction[]
}

确保 typings 文件包含在您的项目中 (tsconfig.json)；

    "typeRoots": [
        "typings/notification.d.ts"
    ]

您现在应该可以访问通知了。

TypeScript 和 Chrome 通知

TypeScript and Chrome Notification

push-notification

typescript

tslint