如何在 Typescript 和 JQuery 中正确使用 Bootstrap 组件

Question

我正在研究一些 TypeScript，所以我尝试创建一个小示例，其中包含一个简单的模式窗口，当用户单击按钮时应该出现该窗口。该示例非常类似于： https://www.w3schools.com/bootstrap/tryit.asp ?filename=trybs_ref_js_modal_js&stacked=h

html 页面包含（只是完整代码的摘录）一个简单的 Bootstrap 模式

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

</div>

然后我尝试简单地附加一个单击事件并使用 jquery 尝试显示模式（类型脚本文件）：

import * as $ from "jquery";

$(document).ready(function(){
    console.log("Document ready!!");
    $("#myBtn").click(function(){
        ($("#myModal")).modal({backdrop: true});
    });
});

我有一个错误：

[ts] 类型“JQuery”上不存在属性“modal”。

显然，错误已使用解决<any>$("#myModal")（但我们失去了类型）

$(document).ready(function(){
    console.log("Document ready!!");
    $("#myBtn").click(function(){
        (<any>$("#myModal")).modal({backdrop: true});
    });
});

但是运行并单击按钮没有任何反应，调试页面时出现错误：

发生异常：类型错误

TypeError: r(...).modal 不是 HTMLButtonElement 中的函数。(/home/antimo/Desktop/programmazione/typescript/ts-vscode-boilerplate/dist/myapp.min.js:1:87688) 在 HTMLButtonElement.dispatch (/home/antimo/Desktop/programmazione/typescript/ts-vscode-样板/dist/myapp.min.js:1:50053)

这些是 npm 的依赖项：

 "devDependencies": {
    "@types/bootstrap": "^3.3.36",
    "@types/chai": "^4.0.4",
    "@types/jquery": "^3.2.12",
    "@types/mocha": "^2.2.32",
    "browser-sync": "^2.17.3",
    "browserify": "^14.0.0",
    "chai": "^4.1.2",
    "gulp": "^3.9.1",
    "gulp-istanbul": "^1.1.1",
    "gulp-mocha": "^4.0.1",
    "gulp-sourcemaps": "^2.1.1",
    "gulp-tslint": "^8.0.0",
    "gulp-typescript": "^3.1.4",
    "gulp-uglify": "^3.0.0",
    "run-sequence": "^2.1.0",
    "tslint": "5.7.0",
    "typescript": "^2.0.3",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0",
    "wallabify": "0.0.15"
  },
  "dependencies": {
    "@types/bootstrap": "^3.3.36",
    "@types/jquery": "^3.2.12",
    "bootstrap": "^3.3.7",
    "jquery": "^3.1.1",
    "tsify": "^3.0.1"
  }

我没有经验，所以我知道这一定是一些简单的错误，但现在找不到问题。

编辑：在 tsconfig.json 中添加类型“jquery”和“bootstrap”解决了编译错误，所以现在我可以使用：

 ($("#myModal")).modal({backdrop: true});

文件 tsconfig.json

    {
    "compilerOptions": {
        "target": "es5",
        "lib": ["es6", "dom"],
        "types": ["mocha", "jquery",  "bootstrap"],
        "sourceMap": true,
        "module": "commonjs",
        "moduleResolution": "node",
......
}

但线上仍然存在错误：

($("#myModal")).modal({backdrop: true});

发生异常：类型错误

TypeError: r(...).modal is not a function
    at HTMLButtonElement.<anonymous>

Answer 1

当提供打字稿定义时，您只是指示打字稿编译器有关第 3 方包中存在哪种功能。它们不包含任何实现，并且不会以任何方式影响您编译的源代码。

因此，如果你想使用 bootstrap/jquery，你必须手动将它们包含在你的 HTML 中，或者（如果我们谈论现代 javascript/typescript，这是更好的方式） - 指示你的模块加载器/捆绑器如何找到它并简单地执行：

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

在你的模块中。有很多示例如何设置 SystemJS、RequireJS 或 Webpack，以便它们在运行时提供 bootstrap/jquery 服务。