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

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!

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.

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
   
       }