Push notification TypeScript和Chrome通知

我正在构建一个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'.

我试着把我的课程包装在里面：

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

但这并没有改变任何事情

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

有了jshint，它会是这样的：

"globals": {
   "Notification": false
}

---

您似乎缺少Chrome的键入定义

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

首先，您需要安装tsd

$ npm install tsd -g

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

$ tsd install chrome

你可以找到更多关于tsd的信息

---

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

这里有几个选项：

将以下行添加到文件顶部

声明风险值通知：任何

这将使transpiler通过，但不会提供TypeScript的许多功能

下载定义类型（chrome.d.ts）

似乎是最流行的定义管理器。
这是另一个有希望的选择

---

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

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

---

_通知将具有与通知相同的属性，并且可以使用相同的属性。这将绕过TypeScript中的任何错误

可通过此链接获得通用键入文件

创建一个名为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[]
}

---

您现在应该能够访问通知。

看起来您缺少类型定义。你的项目中有chrome.d.ts吗？我不熟悉typescript和tslint。我不知道chrome.d.ts是什么！我在这里找到了文件：我该怎么处理它？我会回答的。：）是的，这实际上是TypeScript编译器，而不是TSLint，它警告您一个它认为不存在的变量。要修复它，您需要为通知API/ChromeI添加一个.d.ts文件。请参阅，谢谢！还有一件事：我是否应该从git中排除typings文件夹？您的项目根目录中应该有一个包含所有依赖项的tsd.json文件，所以我认为可以排除它。你可以看看我的项目和文件。它不起作用。我刚刚运行了两个命令，我想我遗漏了一些东西。我没有看到你的tsd链接。我要检查一下以便更好地理解！我已复制了您的存储库，我将尝试复制此问题：）

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