javascript - 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!