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

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.