Thông báo TypeScript và Chrome

Question

Tôi đang tạo ứng dụng Chrome. Ứng dụng được viết bằng TypeScript (Angular2).

Tôi muốn đẩy thông báo. Dưới đây là các mã:

import {Injectable} from 'angular2/core'; 

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

Khi ngụm xây dựng ứng dụng, nó nói:

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

Tôi cố gắng để quấn lớp học của tôi bên trong:

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

Nhưng nó không thay đổi bất cứ điều gì.

Có cách nào với tệp tslint.json để thông báo cho Typecript rằng đây là biến toàn cầu không?

Với jshint nó sẽ là một cái gì đó như thế:

"globals": { 
    "Notification": false 
} 

Answer 1

Một vài tùy chọn ở đây:

1.
Thêm dòng sau vào phía trên cùng của tập tin của bạn.

declare var Notification: any; 

Điều này sẽ làm cho việc vượt qua transpiler nhưng sẽ không mang lại cho bạn nhiều tính năng của TypeScript.

2.
Tải xuống định nghĩa loại (chrome.d.ts).

TSD có vẻ là trình quản lý định nghĩa phổ biến nhất.
Typings là một giải pháp thay thế đầy hứa hẹn khác.

Answer 2

Dường như bạn đang thiếu các định nghĩa gõ dành cho Chrome.

Bạn có thể cài đặt chúng bằng cách sử dụng công cụ tsd.

Trước tiên, bạn cần cài đặt tsd.

$ npm install tsd -g 

Sau đó, bạn có thể sử dụng nó để cài đặt định nghĩa kiểu cho Chrome trong dự án của mình.

$ tsd install chrome 

Bạn có thể tìm thêm thông tin về tsd here.

Lưu ý: đảm bảo bạn chỉ có 1 tệp tsd được xác định cho thư viện.

Answer 3

Tôi chưa tìm thấy tệp d.ts cho API thông báo, nhưng tôi đã tìm thấy một mẹo nhỏ.

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

_Thông báo sẽ có các thuộc tính giống như Thông báo và có thể được sử dụng giống nhau. Điều này sẽ nhận được xung quanh bất kỳ lỗi nào trong TypeScript.

Answer 4

Tệp nhập liệu chung có sẵn qua GitHub TypeScript issue;

Tạo tệp định nghĩa nhập mới được gọi là notification.d.ts và thêm mã sau đây.

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

Đảm bảo tệp nhập được đưa vào dự án của bạn (tsconfig.json);

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

Bây giờ bạn có thể truy cập Thông báo.