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

Question

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:

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 requires or a //reference when 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.

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

Answer 1

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.

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

or from NuGet if using Visual Studio.

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

declare var library : libraryTypedName

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

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

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

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

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!

Answer 2

The convention in TypeScript is to have a reference.ts or reference.d.ts file in your project that will bring in these external references.

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

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

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

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

---

From the TypeScript Language Specificiation (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.

Answer 3

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

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

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

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

3. 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> 

4. Modify the index.ts file. First add these lines on top to reference your libraries. You may need to change the path.

   

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

Answer 4

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

declare var $: any

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