How to Use JQuery with Typescript

TypeScript is a free and open-source programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript, and adds optional static typing to the language. – Wikipedia

This superset of JavaScript is managed by Microsoft and compiles to JavaScript code. In fact, you can write JavaScript code alongside your TypeScript code. This also means that the plethora of JavaScript libraries are also available in the TypeScript world. Libraries such as the write less, do more, library known as JQuery.

JQuery and Typescript don’t exactly work right out of the box though. No matter if you are running NPM or Visual Studio, you will need a TypeScript definition file for jQuery.

To get this for NPM, run command “npm install –save @types/jquery”. This will make sure the JQuery $ function is available in all .ts files, no need for any other imports.

To get this for Visual Studio, open the Nuget Package Manager Console, and run the command “Install-Package jquery.TypeScript.DefinitelyTyped”. This will install the definition file and any dependencies.

Now that we have our definition file, lets see it in action. If you haven’t already, open a new project in Visual Studio Community Edition, using the “HTML Application with TypeScript”, and name it anything you want. There are 3 files we will be using, the first two are already created as part of the project: index.html and app.ts.

Inside index.html go ahead and clear the file out and replace the code with this.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="app.js"></script>
</head>
<body>
    <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
    <div id="content">Hello</div>
</body>
</html>

In the index.html we are referencing a JQuery Library, providing a div we’ll work with and referencing our app.js file. If you notice in the solution explorer there actually isn’t a app.js. That is because this file is created when the project is compiled, so our app.ts will be used to make the app.js.

Next, open up your app.ts file and replace the contents with:

class InvoiceTemplate {
    constructor(element: HTMLElement) {
        $(function () {
            $.get("template.html", function (data) {
                $(element).append(data);
            });
        });
    }
}

window.onload = () => {
    var el = document.getElementById('content');
    var example = new InvoiceTemplate(el);
    example.loadTemplate();
};

In our app.ts file we are not making use of defining variables types or really our constructor even, that’s for another post.

Lastly, to make this work, we need a template to call. We’ll call it template.html. Go ahead and add this file to the VS solution. Our template.html is really going to be fancy. Here it is

<span id="World"> World</span>

When we compile this and run it, what you will get is a nice clean, white, window that says “Hello World”.

If you are seeing that, then you have just made a simple TypeScript application using JQuery.

A Web Developer by trade, find me on Github A motorcycle enthusiast at heart. Most days I'd rather be in the woods anywhere.