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

TypeScript and libraries such as jQuery (with .d.ts files)

提问by dlkulp

I've looked all over the internets but I have yet to find a comprehensive guide that tells me how to take a library such as jquery and use it in a TypeScript project. If there is a guide that exists I would love to know where otherwise these are the things I really need to know:

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

1. I understand that the .d.ts file is only for intellisense so what do I need to get jquery to actually work (compile to ts?)
2. Do I need a requiresor a //referencewhen using VS2013 and if so what is that actually doing?
3. Anything to go from these .d.ts and jquery js files to using the library (or any library) in my ts project.

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

I've been able to figure pretty much everything else out but this one has been rather frustrating.

我已经能够弄清楚几乎所有其他事情，但这一点相当令人沮丧。

采纳答案by John

You don't need to compile jquery to typescript, you just need to use a definition file that tells Typescript how the JavaScript library works.

你不需要将 jquery 编译成 typescript，你只需要使用一个定义文件来告诉 Typescript JavaScript 库是如何工作的。

Get definitions here: https://github.com/DefinitelyTyped/DefinitelyTyped

在此处获取定义：https: //github.com/DefinitelyTyped/DefinitelyTyped

or from NuGet if using Visual Studio.

或者如果使用 Visual Studio，则来自 NuGet。

Then just write your typescript as normal, and declare your library if needed:

然后像往常一样编写你的打字稿，并在需要时声明你的库：

declare var library : libraryTypedName

declare var library : libraryTypedName

for example jquery's d.ts file already does this for you (check the bottom):

例如 jquery 的 d.ts 文件已经为你做了这个（检查底部）：

declare module "jquery" {
    export = $;
}
declare var jQuery: JQueryStatic;
declare var $: JQueryStatic;

https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/jquery

https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/jquery

Now in your .tsfile when you type $it should give you the typescript intellisense.

现在在你的.ts文件中，当你输入$它应该给你打字稿智能感知。

Now the only things you want to include in your bundleconfig / <script>are the .js files, both yours and jquery / other libraries. Typescript is COMPILE time only!

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

回答by Sly_cardinal

The convention in TypeScript is to have a reference.tsor reference.d.tsfile in your project that will bring in these external references.

TypeScript 中的约定是在你的项目中有一个reference.tsorreference.d.ts文件来引入这些外部引用。

So in your reference.tsfile add the path to your jquery.d.ts(the path will be relative to the reference.ts file):

所以在你的reference.ts文件中添加你jquery.d.ts的路径（路径将相对于 reference.ts 文件）：

/// <reference path="../relative/path/to/jquery.d.ts"/>

Then you should be able to use the jQuery definitions in your project.

然后您应该能够在您的项目中使用 jQuery 定义。

NOTE: The reference.ts file is a convention but you can actually add a <reference path="..."/>directive to any TypeScript file if needed.

注意：reference.ts 文件是一个约定，但<reference path="..."/>如果需要，您实际上可以向任何 TypeScript 文件添加指令。

---

---

From the TypeScript Language Specificiation (PDF)11.1.1:

来自TypeScript 语言规范 (PDF)11.1.1：

A comment of the form /// <reference path="…"/>adds a dependency on the source file specified in the path argument. The path is resolved relative to the directory of the containing source file.

表单的注释/// <reference path="…"/>添加了对路径参数中指定的源文件的依赖。路径是相对于包含源文件的目录解析的。

回答by Luo Lei

I am using it in VS 2015, and I am new to typescript.I used jQuery and leaflet in my project. My solution is:

我在 VS 2015 中使用它，我是 typescript 的新手。我在我的项目中使用了 jQuery 和传单。我的解决办法是：

1. Download all these libraies from NuGet manager in VS 2015.

2. Drag the library files (.js) as instructed in this tutorial:

1. 从 VS 2015 中的 NuGet 管理器下载所有这些库。

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

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

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

1. Modify the index.html file by adding these lines.

   <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. Modify the index.ts file. First add these lines on top to reference your libraries. You may need to change the path.

   

3. Add your won code within onDeviceReady(), otherwise you might get javascript runtime error, like sysmbol "$" is not defined. I guess this is because the codes try to load some function when the device is not ready yet. This has worked for me. Hope it would help you too.

       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
   
       }
   

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

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

   

5. 在 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
   
       }
   

回答by Peter

this solution is not for typescript purists :), but if you prefer one line solution, just add this line to your .ts file:

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

declare var $: any

declare var $: any

and then use $anywhere in your typescript code as if you were in js code.

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