TypeScript and Chrome Notification

Question

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
}

Answer 1

A couple of options here:

1. 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.

2. Download the definition type (chrome.d.ts).

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

Answer 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.

Answer 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.