jquery - $.notify 不是在 typescript 中使用 Bootstrap notify 的函数

Question

我正在尝试使用 bootstrap-notify v3.1.3、typescript、aurelia 和 VS2015 在我的网站上显示警报。

我的 aurelia 组件是:

//myAlert.ts

import * as $ from "jquery";

export class FlAlert {

    constructor() {
    }

    alert() {
        $.notify("Hello");
    }
}

//myAlert.html

<template>
    <button class="btn" click.delegate="alert()">showAlert</button>
</template>

当我单击按钮时，我收到此错误:“未捕获的类型错误:$.notify 不是函数”

我在我的项目中包含了 bootstrap-notify.d.ts，所以 VS 从 d.ts 文件中识别“通知”方法

//bootstrap-notify.d.ts

/// <reference path="../jquery/jquery.d.ts" />

/* tslint:disable: interface-name no-any */

interface JQueryStatic {
    notify(message: string): INotifyReturn;
    notify(opts: INotifyOptions, settings?: INotifySettings): INotifyReturn;
    notifyDefaults(settings: INotifySettings): void;
    notifyClose(): void;
    notifyClose(command: string): void;
}

interface INotifyOptions {
    message: string;
    title?: string;
    icon?: string;
    url?: string;
    target?: string;
}

interface INotifySettings {
    element?: string;
    position?: string;
    type?: string;
    allow_dismiss?: boolean;
    allow_duplicates?: boolean;
    newest_on_top?: boolean;
    showProgressbar?: boolean;
    placement?: {
        from?: string;
        align?: string;
    };
    offset?: number;
    spacing?: number;
    z_index?: number;
    delay?: number;
    timer?: number;
    url_target?: string;
    mouse_over?: Function;
    animate?: {
        enter?: string;
        exit?: string;
    };
    onShow?: () => void;
    onShown?: () => void;
    onClose?: () => void;
    onClosed?: () => void;
    icon_type?: string;
    template?: string;
}

interface INotifyReturn {
    $ele: JQueryStatic;
    close: () => void;
    update: (command: string, update: any) => void;
}

编辑:

这是 Aurelia 应用程序的入口点:

export function configure(aurelia: Aurelia) {

    aurelia.use
        .singleton(Constants)
        .plugin("bootstrap", null)
        .standardConfiguration()
        .developmentLogging();

    aurelia
        .start()
        .then(a => a.setRoot('Components/Layout/app'));
}

Answer 1

我迟到了三年，但我今天遇到了同样的问题，只需将 import 'bootstrap-notify'; 添加到我的组件即可解决。