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
}

Kandacekandahar

that looks like you are missing type definitions. do you have the chrome.d.ts included in your project? – Homogony

I'm new to typescript and tslint. I have no idea what chrome.d.ts is ! – Kandacekandahar

I found the file here : github.com/DefinitelyTyped/DefinitelyTyped/blob/master/chrome/… What should I do with it ? – Kandacekandahar

I'll make an answer. :) – Homogony

Sure :) Thank you ! – Kandacekandahar

Yep, this is actually the TypeScript compiler, not TSLint, warning you about a variable that it thinks doesn't exist. To fix it, you'll want to add a .d.ts file for the Notifications API / Chrome – Muriah

I just downloaded this file github.com/DefinitelyTyped/DefinitelyTyped/blob/master/chrome/… to the root of my project, do I have to do anything else ? – Kandacekandahar

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.

Clasping

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.

Autorotation

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.

Homogony

I see, thanks ! Just one more thing : Should i exclude typings folder from git or not ? – Kandacekandahar

you should have a tsd.json file in your project root with all the dependencies so I would say it's fine to exclude it. – Homogony

github.com/maxime1992/real-debrid-stream you can have a look to the project and the file I have. It does not work. I just ran the 2 commands, I'm missing something here I guess. – Kandacekandahar

I hadn't seen your tsd link. I'm gonna check to understand better ! – Kandacekandahar

I've copied your repository and I'll try to reproduce the issue :) – Homogony

I just pushed where I currently am ! It's in chrome-notif branch, commit "tmp" :) – Kandacekandahar

one thing, you shouldn't have the chrome.d.ts file in the root only in the typings. :) – Homogony

Ok ! I haven't read dts tutorial yet but I'll soon ! Is it working for you ? – Kandacekandahar

Let us continue this discussion in chat. – Homogony

I fixed it, but you have more than one problem in your project. This was just the first :D – Homogony

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

Alodi