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

Question

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

未捕获的类型错误：未捕获的类型错误：$(...).tooltip 不是函数

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

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);对象记录引导程序时，该对象为空：

{}

知道为什么引导程序不会被加载吗？

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

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

Answer 1

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

由于您想要从 Bootstrap 获得的一切都只是 jQuery 的扩展，这似乎就是秘密武器。作为参考，该解决方案源自 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...