javascript - TypeScript $(...).tooltip 不是函数

Question

当我尝试附加工具提示时，控制台中记录了以下错误。

Uncaught TypeError: Uncaught TypeError: $(...).tooltip is not a function

我的编译器通过智能感知向我显示所有工具提示选项，因此它似乎是通过类型定义文件获取 Bootstrap 模块。

import * as $ from "jquery";
import * as bootstrap from "bootstrap";

$(function () {
    // jquery works
    $("#btnOnboardingFilesUpload")
        .click(function () { alert('upload files'); })
        .attr('disabled', 'disabled')
        .attr('title', 'You haven\'t selected any files.')
        .attr('data-placement', 'top');

    // bootstrap doesn't? Uncaught TypeError: Uncaught TypeError: $(...).tooltip is not a function
    $("#btnOnboardingFilesUpload").tooltip();
});

当我尝试通过 console.log(bootstrap); 记录 bootstrap 时，对象为空:

{}

知道为什么 Bootstrap 无法加载吗？

我在 package.json 中有以下依赖项:

  "dependencies": {
    "ts-loader": "^3.2.0",
    "jquery": "^2.2.0",
    "bootstrap": "^3.3.5"
  },

Answer 1

我也在努力解决同样的问题，我认为解决方案只是将导入替换为 import "bootstrap";

由于您想要从 Bootstrap 获得的一切都只是 jQuery 的扩展，这似乎就是 secret 武器。作为引用，该解决方案源自 SO 上的另一个答案:Import jquery and bootstrap in typescript commonjs

示例:

import "jquery";
import "bootstrap";

export class Grid {
    // additional properties here...

    constructor(options?:Partial<Grid>) {
        $.extend(this, options); // allow for assigning values to properties via the constructor
    }
    Initialize() {
        var _this = this;
        $(document).ready(function () {
            $(window).on('load', function () {
                $(_this.FileUploadButton)
                    .click(function () { _this.UploadFiles($(this)); })
                    .attr('disabled', 'disabled')
                    .attr('title', 'You haven\'t selected any files.')
                    .attr('data-placement', 'top')
                    .tooltip();
    // etc...