9

私はChromeアプリを構築しています。アプリは TypeScript (Angular2) で記述されています。

通知をプッシュしたい。コードは次のとおりです。

import {Injectable} from 'angular2/core';

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

gulp がアプリをビルドすると、次のように表示されます。

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

私は自分のクラスを中にラップしようとしました:

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

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

tslint.json ファイルを使用して、これがグローバル変数であることを Typescript に伝える方法はありますか?

jshint を使用すると、次のようになります。

"globals": {
   "Notification": false
}
4

4 に答える 4

11

ここにいくつかのオプションがあります：

  1. 次の行をファイルの先頭に追加します。

    変数の宣言通知: 任意;

    これにより、トランスパイラーはパスしますが、TypeScript の機能の多くは提供されません。

  2. 定義型 (chrome.d.ts) をダウンロードします。

    TSDは、最も人気のある定義マネージャーのようです。
    タイピングは、もう 1 つの有望な代替手段です。

于 2016-01-05T20:38:18.970 に答える
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"
    ]

これで、通知にアクセスできるようになります。

于 2017-01-10T12:29:14.537 に答える
3

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

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

_Notification は Notification と同じプロパティを持ち、同じように使用できます。これにより、TypeScript のエラーを回避できます。

于 2016-01-21T13:36:23.187 に答える
3

Chrome のタイピング定義が欠落しているようです。

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

最初にtsdをインストールする必要があります。

$ npm install tsd -g

その後、それを使用して Chrome の型定義をプロジェクトにインストールできます。

$ tsd install chrome

tsd の詳細については、こちらを参照してください。

注: ライブラリに対して tsd ファイルが 1 つだけ定義されていることを確認してください。

于 2016-01-05T17:50:25.930 に答える