TypeScript和库，例如jQuery（带.d.ts文件）

Question

我已经查看了整个互联网，但我还没有找到一份全面的指南，告诉我如何使用jquery这样的库并在TypeScript项目中使用它。如果有一个指南存在，我很想知道这些是我真正需要知道的地方：

1. 我知道.d.ts文件只适用于intellisense所以我需要什么才能让jquery实际工作（编译成ts？）
2. 使用VS2013时是否需要requires或//reference，如果是，那实际上是做什么的？
3. 从这些.d.ts和jquery js文件到我的ts项目中使用库（或任何库）的任何内容。

我已经能够解决其他所有问题，但这个问题令人沮丧。

Answer 1

您不需要将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时，现在在$文件中，它应该为您提供打字稿智能感知。

现在，您希望在bundleconfig / <script>中包含的唯一内容是.js文件，包括您的文件和jquery /其他库。打字稿只是编译时间！

Answer 2

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="…"/>形式的注释会增加对源文件的依赖性   在path参数中指定。路径相对于包含的目录进行解析   源文件。

Answer 3

我在VS 2015中使用它，我是typescript的新手。我在我的项目中使用了jQuery和leaflet。我的解决方案是：

1. 从VS 2015中的NuGet经理下载所有这些图书馆。

2. 按照本教程中的说明拖动库文件（.js）：

https://taco.visualstudio.com/en-us/docs/get-started-first-mobile-app/

1. 通过添加这些行来修改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>
   

2. 修改index.ts文件。首先在顶部添加这些行以引用您的库。您可能需要更改路径。

   

3. 在onDeviceReady（）中添加您赢得的代码，否则您可能会收到javascript运行时错误，例如sysmbol＆＃34; $＆＃34;没有定义。我想这是因为当设备尚未准备好时，代码会尝试加载某些功能。这对我有用。希望它也能帮到你。

       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
   
       }
   

Answer 4

此解决方案不适用于打字稿纯粹主义者:)，但如果您更喜欢一行解决方案，只需将此行添加到您的.ts文件中：

declare var $: any

然后在打字稿代码中的任何位置使用$，就像使用js代码一样。