TypeScript and Chrome Notification

问题

I'm building a Chrome app. The app is written with TypeScript (Angular2).

I would like to push notifications. Here's the code :

import {Injectable} from 'angular2/core';

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

When gulp build the app, it says :

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

I tried to wrap my class inside :

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

But it does not change anything.

Is there a way with tslint.json file to tell Typescript that this is a global variable ?

With jshint it would be something like that :

"globals": {
   "Notification": false
}

回答1:

A couple of options here:

Add the following line to the top of your file.

declare var Notification: any;

This will make the transpiler pass but won't give you the much of TypeScript's features.
Download the definition type (chrome.d.ts).

TSD seems to be the most popular definition manager.
Typings is another promising alternative.

回答2:

A generic typing file is available via this GitHub TypeScript issue;

Create a new typing definition file called notification.d.ts and add the following code.

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[]
}

Making sure the typings file is included in your project (tsconfig.json);

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

You should now be able to access Notification.

回答3:

It looks like you are missing the typing definitions for Chrome.

You can install them using the tsd tool.

First you need to install tsd.

$ npm install tsd -g

Then you can use it to install the type definitions for Chrome in your project.

$ tsd install chrome

You can find more info on tsd here.

Note: make sure you have only 1 tsd file defined for a library.

回答4:

I haven't found the d.ts files for the Notifications API, but i have found a little trick.

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

_Notification will have the same properties as Notification, and can be used the same. This will get around any errors in TypeScript.

来源：https://stackoverflow.com/questions/34617674/typescript-and-chrome-notification

标签

push-notification

typescript

tslint