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

出于某种原因，尽管我不确定为什么，当我将它包装在 (function($) { })(jQuery); IIFE 中时，bootstrap 可以正常工作。

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();

Answer 2

我也在为同样的事情苦苦挣扎，我认为解决方案只是将您的导入替换为 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...

Answer 3

您也可以使用 rubygems jquery-ui-rails 和 jquery-ui-themes My application.js 有 require("bootstrap") 和 import("bootstrap") 但我遇到了同样的问题 TypeError: $(…).tooltip is not a function I solved通过使用宝石

Answer 4

像上面的答案一样导入 bootstrap 导致了我的问题。

我为了修复它所做的如下：

在package.json中，我添加了"@types/jquery": "^3.5.14" & "@types/bootstrap": "5.1.9" 到 devDependencies 字段。
在tsconfig.json中，我添加了"jquery" & "bootstrap" 到 compilerOptions.types 列表，所以它看起来像这样：

"compilerOptions": {
    "baseUrl": "../node_modules/@types",
    "experimentalDecorators": true,
    "types": [
      "jquery",
      "node",
      "bootstrap"
    ],

然后执行npm i和npm run build.

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

TypeScript $(...).tooltip is not a function

javascript

jquery

twitter-bootstrap

typescript

typescript-typings