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

【问题标题】：TypeScript $(...).tooltip is not a functionTypeScript $(...).tooltip 不是函数
【发布时间】：2018-06-26 19:16:08
【问题描述】：

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

Uncaught TypeError: Uncaught TypeError: $(...).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"
  },

【问题讨论】：

我无法理解为什么这个问题被否决了。有人能解释一下这个问题吗？

标签： javascript jquery twitter-bootstrap typescript typescript-typings

【解决方案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...

【讨论】：

你是对的。这也对我有用。我已编辑您的答案以包含我的解决方案中的代码。

【解决方案2】：

出于某种原因，虽然我不确定为什么，但当我将引导程序包装在(function($) { })(jQuery); IIFE 中时，它可以正常工作。

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

class EditableGrid {
    $DepartmentsSelectlist: any = $('.select-onboarding-department');
    $ErrorsAlertDiv: any = $('.alert-onboarding-errors');
    $UploadFilesInput: any = $("#OnboardingFilesInput");
    $GridTable: any = $('#onboardingFilesGrid');
    Initialize(): void {
        var _this = this;
        (function ($) {
            $(document).ready(function () {
                $(window).on('load', function () {
                    console.log(bootstrap);
                    // jquery works
                    $("#btnOnboardingFilesUpload")
                        .click(function () { _this.UploadFiles($(this)); })
                        .attr('disabled', 'disabled')
                        .attr('title', 'You haven\'t selected any files.')
                        .attr('data-placement', 'top');

                    // bootstrap works now!
                    $("#btnOnboardingFilesUpload").tooltip();
                });
            });
        })(jQuery);
    }
    UploadFiles(btnUpload) {
        alert('upload files');
    }
}

var onboardingGrid = new EditableGrid();
onboardingGrid.Initialize();

【讨论】：

【解决方案3】：

您也可以通过使用 rubygems jquery-ui-rails 和 jquery-ui-themes 来解决这个问题我的 application.js 有 require("bootstrap") 和 import("bootstrap") 但我遇到了同样的问题 TypeError： $(...).tooltip 不是我使用 gems 解决的函数

【讨论】：