Notifica TypeScript e Chrome

Question

Sto costruendo un'app Chrome. L'app è scritta con TypeScript (Angular2).

Vorrei inviare notifiche. Ecco il codice:

import {Injectable} from 'angular2/core'; 

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

Quando gulp costruire l'applicazione, si dice:

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

ho cercato di avvolgere la mia classe all'interno:

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

Ma non cambia nulla.

C'è un modo con il file tslint.json per dire a Typescript che questa è una variabile globale?

Con jshint sarebbe qualcosa di simile:

"globals": { 
    "Notification": false 
} 

Answer 1

Un paio di opzioni qui:

1.
Aggiungere la seguente riga alla parte superiore del file.

declare var Notification: any; 

Questo farà passare il transpiler ma non fornirà gran parte delle funzionalità di TypeScript.

2.
Scarica il tipo di definizione (chrome.d.ts).

TSD sembra essere il gestore di definizioni più popolare.
Typings è un'altra alternativa promettente.

Answer 2

Sembra che si sta perdendo le definizioni di battitura per Chrome.

È possibile installarli utilizzando lo strumento tsd.

Per prima cosa è necessario installare tsd.

$ npm install tsd -g 

Quindi è possibile utilizzarlo per installare le definizioni di tipo per Chrome nel progetto.

$ tsd install chrome 

È possibile trovare maggiori informazioni su TSD here.

Nota: assicurarsi di avere solo 1 file tsd definito per una libreria.

Answer 3

Non ho trovato i file d.ts per l'API di notifica, ma ho trovato un piccolo trucco.

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

_ La notifica avrà le stesse proprietà di Notifica e può essere utilizzata allo stesso modo. Questo aggirerà qualsiasi errore in TypeScript.

Answer 4

Un file di digitazione generico è disponibile tramite questo GitHub TypeScript issue;

Creare un nuovo file di definizione della digitazione denominato notification.d.ts e aggiungere il seguente codice.

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

Assicurarsi che il file di digitazione sia incluso nel progetto (tsconfig.json);

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

Ora dovrebbe essere possibile accedere alla notifica.