活字体とChrome通知

Question

私はChromeアプリケーションを構築しています。アプリは活字体（Angular2）と書かれています。

私はプッシュ通知をしたいと思います。ここでは、コードがあります：

import {Injectable} from 'angular2/core'; 

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

ゴクゴクアプリをビルドすると、それは言う：

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

私は内部の私のクラスをラップしてみました：

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

しかし、それは何も変わりません。

tslint.jsonファイルで、これがグローバル変数であることをTypescriptに伝える方法はありますか？あなたがChromeのタイピングの定義が欠落しているように見えます

"globals": { 
    "Notification": false 
} 

Answer 1

ここではオプションのカップル：

1.
は、ファイルの先頭に以下の行を追加します。

declare var Notification: any; 

これは、トランスバータを通過させますが、TypeScriptの機能の多くを提供しません。

2.
定義タイプ（chrome.d.ts）をダウンロードします。

TSDが最も人気のある定義マネージャーのようです。
Typings別の有望な代替です。

Answer 2

：それはそのようなものになるだろうjshintで

。

tsdツールを使用してインストールできます。

まず、tsdをインストールする必要があります。

$ npm install tsd -g 

次に、Chromeのタイプ定義をプロジェクトにインストールするために使用できます。

$ tsd install chrome 

あなたはTSD here詳細を見つけることができます。

注：ライブラリ用に1つのtsdファイルしか定義されていないことを確認してください。

Answer 3

通知API用のd.tsファイルが見つかりませんでしたが、ちょっとしたトリックが見つかりました。

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

_NotificationはNotificationと同じプロパティを持ち、同じものを使用できます。これは、活字体のいずれかのエラーを回避します。

Answer 4

一般的なタイピングファイルは、GitHub TypeScript issueから入手できます。

新しい入力定義ファイル（notification.d.ts）を作成し、次のコードを追加します。

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

入力ファイルがプロジェクト（tsconfig.json）に含まれていることを確認してください。

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

通知にアクセスできるようになりました。