Using jQuery in TypeScript

By Feb 17, 2018

Description:

Here we explain how to use the jQuery library in a Typescript program and give an example.

Preferencesoft

 

This article shows how to use jQuery in TypeScript and gives some examples.

jQuery, a powerful library

To develop a Web application using JavaScript, executable on all browsers (or at least on newer ones), we often use the jQuery library.

There are several reasons for this:

  • Not all browsers interpret JavaScript statements in the same way or do not include all instructions. The JS language has been standardized only recently (ECMAScript Standard).
  • Browser CSS Selectors do not all change objects correctly.
  • The JS language has few instructions for manipulating the DOM elements of an HTML page.

Thus, the jQuery library has become an almost indispensable tool for Web development.

Installing jQuery

The jQuery library having been developed into an untyped JavaScript, it is not enough to import it to be able to use it from TypeScript.

We need to get a .d.ts file (which already exists for jQuery), that is a TypeScript code file defining types.

You can find on the Web a jquery.d.ts file in a directory called DefinitelyTyped.

(http://definitelytyped.org/) but if you're working with Visual Studio, the easiest way is to install the Nuget package called jquery.TypeScript.DefinitelyTyped into your project.

Example of using jQuery in TypeScript

Create a Web application ASP.NET named TypeScriptWithjQuery

I assume that jQuery is already installed.

Go to Nuget package manager and install the package: jquery.TypeScript.DefinitelyTyped.

definitly typed

In this example, we will create two buttons. The first Go button displays a message in a text box and the second Info button progressively displays text underneath and then deletes it.

Be careful to import jQuery before Demo.js in the .cshtml, .aspx or .html page, otherwise jQuery instructions will not be available when running the TypeScript program.

We can use jQuery’s $(document).ready, but the JavaScript window.onload instruction is compatible with many browsers.

 

Demo.ts
///<reference path="typings/jquery/jquery.d.ts" />
class Demo {
    message: string;

    constructor(mes: string) {
        this.message = mes;
    }

    ClickGo() {
        $("#lblGo").text("You pressed the Go button");
    }

    ClickInfo() {
        $("#Info").text(this.message);
        $("#Info").fadeOut("slow");
        $("#Info").fadeIn(2000);
    }
}

let dem = new Demo("bla bla bla bla");

$(document).ready(function () {
    $('#btnGo').click(function () {
        dem.ClickGo();
    });
    //$("#btnShowInfo").click(dem.ClickInfo); // doesn't work
    $("#btnShowInfo").click(function () {
        dem.ClickInfo();
    });
});

/*
window.onload = () => {
    $('#btnGo').click(function () {
           dem.ClickGo();
    });
    $("#btnShowInfo").click(dem.ClickInfo);
};
*/

 

Index.cshtml
<h1>jQuery in TypeScript</h1>

<div class="row">

    <input type="button" id="btnGo" value="Go" />&nbsp;<label id="lblGo">...</label>

</div>
<div class="row">

    <input type="button" id="btnShowInfo" value="Info" />
    <div id="message">
        <span id="Info"></span>
    </div>

</div>

 

html page
TypeScript

Categories

Share

Follow


KodFor Privacy Policy