9

我正在构建一个 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
}
4

4 回答 4

11

这里有几个选项：

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

    声明 var 通知：任何；

    这将使转译器通过，但不会为您提供 TypeScript 的大部分功能。

  2. 下载定义类型 (chrome.d.ts)。

    TSD似乎是最流行的定义管理器。
    Typings是另一个很有前途的选择。

于 2016-01-05T20:38:18.970 回答
4

可通过此GitHub 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[]
}

确保类型文件包含在您的项目中（tsconfig.json）；

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

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

于 2017-01-10T12:29:14.537 回答
3

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

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

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

于 2016-01-21T13:36:23.187 回答
3

您似乎缺少 Chrome 的输入定义。

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

首先你需要安装tsd。

$ npm install tsd -g

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

$ tsd install chrome

您可以在此处找到有关 tsd 的更多信息。

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

于 2016-01-05T17:50:25.930 回答