代码之家 › 专栏 › 技术社区 › user1477388

TypeScript$(…)。工具提示不是功能

typescript-typings typescript twitter-bootstrap jquery javascript

user1477388 · 技术社区 · 8 年前

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

未捕获类型错误:未捕获类型错误:$(…)。工具提示不是功能

我的编译器通过intellisense向我显示了所有工具提示选项,因此它似乎是通过类型定义文件拾取引导模块。

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); 对象为空:

{}

知道为什么不能加载引导程序吗?

我在包中有以下依赖项。json:

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

4 回复 | 直到 8 年前

user1477388 8 年前

我也在努力解决同样的问题,我认为解决方法就是用 import "bootstrap";

因为您想要从引导数据库中获得的一切都只是jQuery的扩展,所以这似乎就是秘诀所在。作为参考,此解决方案源自另一个答案,因此: 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...

user1477388 8 年前

出于某种原因,虽然我不知道为什么,但当我将引导程序包装到 (function($) { })(jQuery); 生命。

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

Elyasaf755 4 年前

像上面的答案那样导入引导程序导致了我的问题。

我为修复它所做的如下:

在里面 包裹json ,我已添加 "@types/jquery": "^3.5.14" & "@types/bootstrap": "5.1.9" 到 devDependencies 领域
在里面 t配置。json ,我已添加 "jquery" & "bootstrap" 到 compilerOptions.types 列表,所以看起来像这样:

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

然后执行 npm i 和 npm run build .

-1

Mices 5 年前

您还可以通过在我的应用程序中使用rubygems jquery ui rails和jquery ui主题来解决这个问题。js有require(“bootstrap”)和import(“bootstrap”),但我遇到了相同的问题TypeError:$()。工具提示不是我用gems解决的功能