TypeScript, RequireJS and jQuery

7 Comments November 26, 2014

A while ago I spent ages trying to find the best way of using RequireJS and jQuery within a TypeScript project; given that a colleague of mine was complaining how difficult it was to find coherent information on how to set up this kind of project, it seemed like a good idea to write it up.

Setup the Project

I'm using Visual Studio 2013 Update 3 (Community Edition) so different versions may behave slightly differently - I will rewrite this for Visual Studio 2015 nearer release if it's needed.

In Visual Studio, create a new project by going to File | New | Project and selecting an HTML Application with TypeScript template.

Create New Project

Running the project will produce the familiar TypeScript application.

TypeScript Application

In the Package Manager Console, add the NuGet packages we'll need.

Install-Package RequireJS
Install-Package RequireJS.TypeScript.DefinitelyTyped
Install-Package jQuery
Install-Package jQuery.TypeScript.DefinitelyTyped

Convert to RequireJS

Go to the project properties and change the TypeScript Build module system from None to AMD.

Build System

Add a new TypeScript file to the root of the application called config.ts and add the following:

requirejs.config({
    paths: {
        "jquery": "Scripts/jquery-2.1.1"
    }
});

require(["app"]);

This config file sets up RequireJS to locate the jQuery dependency in the Scripts folder when requested. The next thing we need to do is set this as the entry point for our RequireJS application. To do this, change the <script /> tag in index.html from:


to:


This has the effect of loading the config and then running the application.

We'll change the application code to pull in the Greeter class from a separate module and for that module to require jQuery to function.

Start by modifying app.ts so that it is reduced to nothing more than:

import g = require("greeter");

var greeter = new g.Greeter("#content");
greeter.start();

Then add a new file, greeter.ts to the application root and set the content to:

import $ = require("jquery");

export class Greeter {
    timerToken: number;

    constructor(private selector: string) {
        this.displayTime();
    }

    start() {
        this.timerToken = setInterval(() => this.displayTime(), 500);
    }

    stop() {
        clearTimeout(this.timerToken);
    }

    private displayTime() {
        $(this.selector).text("The time is: " + new Date().toUTCString());
    }
} 

Run the application, and as before the time will tick over in the browser, as though nothing has been changed! ;)

So there you have it, a simple way to add jQuery and RequireJS to a TypeScript project in Visual Studio 2013.

Hope this helps someone out.


7 Comments

  • Gravatar Image
    Clark February 21, 2015 1:36 PM

    Thanks for this tutorial! It was exactly what I am looking for! There is no other information about it anywhere. You saved me 4 hours+

  • Gravatar Image
    Stach September 2, 2015 9:14 PM

    Great example. Thanks a lot!

  • Gravatar Image
    Ifthekhar March 30, 2016 3:56 AM

    A big big thanks for this. You saved my life.

  • Gravatar Image
    jesper April 10, 2016 3:07 AM

    Thanks, nice and simple. I have spend the last hour looking for typescript / requirejs / angularjs, and this is the most clear example I have found so far. Will try it later tonight.

  • Gravatar Image
    Den April 24, 2016 8:15 PM

    How do you use requirejs?
    I'm getting error: cannot find name "requirejs".

  • Gravatar Image
    Mark May 25, 2016 3:41 PM

    Simple to the point and what I have been looking for :) Thanks!

  • Gravatar Image
    Rich N June 7, 2016 8:53 PM

    Thanks very much: I was struggling with requirejs and Visual Studio and this helped. It still works as of June 2016 with the latest versions (VS 2015, TypeScript 1.8, jQuery 2.2.3): the only gotcha is you need to edit the config.ts file to refer to Scripts/jquery-2.2.3 (not Scripts/jquery-2.1.1), which should be obvious but I missed it.