我已经浏览了整个互联网，但我还没有找到一个全面的指南来告诉我如何使用 jquery 之类的库并在 TypeScript 项目中使用它。如果存在指南，我很想知道这些是我真正需要知道的事情：
requires 或 //reference，如果需要，它实际上在做什么？我已经能够弄清楚几乎所有其他的事情，但这一点相当令人沮丧。
【问题讨论】：
标签： javascript jquery typescript
TypeScript 中的约定是在您的项目中有一个 reference.ts 或 reference.d.ts 文件，它将引入这些外部引用。
所以在您的reference.ts 文件中添加您的jquery.d.ts 的路径（该路径将相对于reference.ts 文件）：
/// <reference path="../relative/path/to/jquery.d.ts"/>
那么你应该可以在你的项目中使用 jQuery 定义了。
注意：reference.ts 文件是一个约定，但如果需要，您实际上可以将 <reference path="..."/> 指令添加到任何 TypeScript 文件。
来自TypeScript Language Specificiation (PDF)11.1.1：
/// <reference path="…"/>形式的注释添加了对源文件的依赖 在路径参数中指定。路径是相对于包含的目录解析的 源文件。
【讨论】：
@types 项目可以让你做import * as $ from 'jquery' 并获得正确的类型信息：typescriptlang.org/docs/handbook/…
你不需要将 jquery 编译成 typescript，你只需要使用一个定义文件来告诉 Typescript JavaScript 库是如何工作的。
在此处获取定义： https://github.com/DefinitelyTyped/DefinitelyTyped
如果使用 Visual Studio，则来自 NuGet。
然后像往常一样编写你的打字稿，并在需要时声明你的库：
declare var library : libraryTypedName
例如 jquery 的 d.ts 文件已经为你做了这个（检查底部）：
declare module "jquery" {
export = $;
}
declare var jQuery: JQueryStatic;
declare var $: JQueryStatic;
https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/jquery
现在在您的 .ts 文件中，当您键入 $ 时，它应该会为您提供 typescript intellisense。
现在您想要包含在 bundleconfig / <script> 中的唯一内容是 .js 文件，包括您的和 jquery / 其他库。打字稿只有编译时间！
【讨论】：
我在 VS 2015 中使用它，而且我是 typescript 的新手。我在我的项目中使用了 jQuery 和传单。我的解决方案是：
https://taco.visualstudio.com/en-us/docs/get-started-first-mobile-app/
通过添加这些行来修改 index.html 文件。
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="css/leaflet.css" />
<script src="scripts/jquery-2.2.3.min.js"></script>
<script src="scripts/jquery.mobile-1.4.5.min.js"></script>
<script src="scripts/leaflet-0.7.3.min.js"></script>
修改 index.ts 文件。首先将这些行添加到顶部以引用您的库。您可能需要更改路径。
在 onDeviceReady() 中添加您赢得的代码，否则您可能会收到 javascript 运行时错误，例如未定义 sysmbol "$"。我猜这是因为代码尝试在设备尚未准备好时加载某些功能。这对我有用。希望对你也有帮助。
function onDeviceReady() {
document.addEventListener('pause', onPause, false);
document.addEventListener('resume', onResume, false);
var parentElement = document.getElementById('deviceready');
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
// your code goes here
}
【讨论】：
此解决方案不适用于打字稿纯粹主义者 :)，但如果您更喜欢单行解决方案，只需将此行添加到您的 .ts 文件中：
declare var $: any
然后在您的打字稿代码中的任何位置使用$，就像您在 js 代码中一样。
【讨论】：