Version

Using Ignite UI for jQuery with TypeScript

Topic Overview

This topic is an overview for using the Ignite UI for jQuery type definitions for TypeScript.

Required background

The following table lists the materials required as a prerequisite to understanding this topic:

Concepts

Topics

In this topic

This topic contains the following sections:

Introduction

Ignite UI for jQuery® provides type definitions for TypeScript allowing you to take advantage of strong typing, compile time checking and intellisense features.

The definitions for the controls can be installed via NPM with the following command npm install @types/ignite-ui. They extend the jQuery and jQuery UI definitions for TypeScript and thus it depends on them.

Syntax

Syntax for using Ignite UI for jQuery controls in TypeScript application is the same as you write vanilla JavaScript application. This means that you can refer to the Ignite UI for jQuery API documentation for code snippets reference.

Creating TypeScript App with Ignite UI for jQuery

Requirements

When considering the required resources the same requirements and options apply as described in the "Using JavaScript Resources in Ignite UI for jQuery" documentation in addition to loading the Ignite UI for jQuery Angular directives module afterwards. This means that along with some styles the application would also need to include:

Steps

  1. Create a new HTML App with TypeScript in Visual Studio.

  2. Include the Ignite UI for jQuery theme and structural files:

    In HTML:

     <!-- Ignite UI for jQuery Required Combined CSS Files -->
 <link href="http://cdn-na.infragistics.com/igniteui/2020.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
 <link href="http://cdn-na.infragistics.com/igniteui/2020.1/latest/css/structure/infragistics.css" rel="stylesheet" />

  3. Add the JavaScript libraries (modernizr is optional):

    In HTML:

    <!-- JavaScript Library Dependencies -->
<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

  4. Include Ignite UI for jQuery scripts. Preferably use a custom download, but you can also check "Using JavaScript Resources in Ignite UI for jQuery" topic for other methods.

    In HTML:

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2020.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2020.1/latest/js/infragistics.lob.js"></script>
<!-- Required by the data vizualization controls -->
<script src="http://cdn-na.infragistics.com/igniteui/2020.1/latest/js/infragistics.dv.js"></script>

  5. Add reference path to where the TypeScript file for your application is located:

    In HTML:

     <script src="./TypeScript/sampleApp.js"></script>

  6. Include the reference paths to the Ignite UI for jQuery and jQuery type definitions for TypeScript:

    In TypeScript:

     /// <reference path="jqueryui.d.ts" />
 /// <reference path="jquery.d.ts" />
 /// <reference path="igniteui.d.ts" />

Note: This is needed for TypeScript versions prior to 1.5 so the compiler could include the dependencies in the program during compilation. In 1.5 and newer versions they can be defined in a separate tsconfig.json file. For more information see the tsconfig.json wiki page

  1. In your view you need to instruct where your application runs. For example:

    In HTML:

     <body>
     <!--...-->
     <div id="sampleAppID"></div>
     <!--...-->
 </body>

  2. And finally add the desired control, for example an igDialog:

    In TypeScript:

     $(function () {
   // Initialize the igDialog
   $("#sampleAppID").igDialog({
       state: "closed",
       modal: true,
       draggable: false,
       resizable: false,
       height: 500,
       width: 400
   });
 });

Related Content

Samples

The following samples provide additional information related to this topic.

View on GitHub