After learning about importing TypeScript libraries and their compilation to JS for build output, I encountered a script that did not behave as expected. The issue remains unclear.
main.ts
/// <reference path="../typings/globals/jquery/index.d.ts" />
var data = "Hello Tahir";
$("div").text(data);
The code above compiles without errors to
main.js
/// <reference path="../typings/globals/jquery/index.d.ts" />
var data = "Hello Tahir";
$("div").text(data);
//# sourceMappingURL=main.js.map
In the final output, it is evident that jQuery library is not included, leading to an error in the browser console:
ReferenceError: $ is not defined
The immediate solution seems to be manually adding jQuery to the template file header like so:
<script
src="https://code.jquery.com/jquery-3.1.1.js"
integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
crossorigin="anonymous"></script>
However, this approach feels inadequate, suggesting that there may be a crucial element missing from my understanding.
Seeking guidance, thank you!