Powiadomienia TypeScript i Chrome

Question

Buduję aplikację Chrome. Aplikacja jest napisana w TypeScript (Angular2).

Chciałbym przesłać powiadomienia. Oto kod:

import {Injectable} from 'angular2/core'; 

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

Gdy łyk zbudować aplikację, to mówi:

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

Próbowałem zawinąć moją klasę Wewnątrz:

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

Ale to niczego nie zmienia.

Czy istnieje sposób na plik tslint.json, który informuje Maszynopis, że jest to zmienna globalna?

Z jshint byłoby coś takiego:

"globals": { 
    "Notification": false 
} 

Answer 1

Kilka opcji tutaj:

1.
Dodaj następujący wiersz na początku pliku.

declare var Notification: any; 

To sprawi, że transpiler przejdzie, ale nie zapewni Ci zbyt wielu funkcji TypeScript.

2.
Pobierz typ definicji (chrome.dts).

TSD wydaje się być najpopularniejszym menedżerem definicji.
Typings to kolejna obiecująca alternatywa.

Answer 2

Wygląda brakuje definicji typowania dla Chrome. Można je zainstalować za pomocą narzędzia tsd. Najpierw należy zainstalować tsd.

$ npm install tsd -g 

Następnie można go użyć do zainstalowania definicji typów dla Chrome w projekcie.

$ tsd install chrome 

można znaleźć więcej informacji na temat TSD here.

Uwaga: upewnij się, że dla biblioteki zdefiniowano tylko 1 plik tsd.

Answer 3

Nie znalazłem plików d.ts dla interfejsu API powiadomień, ale znalazłem małą sztuczkę.

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

_Notyfikacja będzie miała takie same właściwości jak Powiadomienie i może być używana tak samo. Pozwoli to obejść wszelkie błędy w TypeScript.

Answer 4

Ogólny plik do pisania jest dostępny za pośrednictwem tego GitHub TypeScript issue;

Utwórz nowy plik definicji pisania o nazwie notification.d.ts i dodaj następujący kod.

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

Upewnienie się, że plik typingu jest zawarty w projekcie (tsconfig.json);

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

Powinieneś mieć teraz dostęp do Powiadomień.