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>

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

import * as $ from "jquery";

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

我有一个错误：

[ts] Property＆＃39; modal＆＃39;在类型＆＃39; JQuery＆＃39;。
上不存在

显然，错误是使用<any>$("#myModal")解决的（但我们是松散的类型）

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

但是运行并点击按钮没有任何反应，调试页面我有一个错误：

发生异常：TypeError

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-boilerplate/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"
  }

我没有经验所以我知道这必须是一些简单的错误，但现在无法找到问题......

修改：添加类型＆＃34; jquery＆＃34;和＆＃34; bootstrap＆＃34;在tsconfig.json中解决了编译错误，所以现在我可以使用：

 ($("#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

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

Answer 1

提供typescript定义时，您只需指示typescript编译器，了解第三方包中存在哪种功能。它们不包含任何实现，也不会以任何方式影响编译源。

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

A   C     D
1   107  124
2   66   102
3   0    112
4   0    80

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

Answer 2

您似乎没有将index.d.ts和/或@types/bootstrap节点模块中的@types/jquery包含到您的TypeScript编译中。

如何使用JQuery

2 个答案: