TypeScript definitions for jQWidgets

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. TypeScript compiles to clean, simple JavaScript code which runs on any browser, in Node.js, or in any JavaScript engine that supports ECMAScript 3 (or newer). TypeScript can also be found under the abbreviation - TSC.

A. Prerequisites

Node.js - to check the current installed version, type npm -v in the command line(cmd).
TypeScript - to check the current installed version, type tsc -v in the command line(cmd).

Note: To install TypeScript.

npm install -g typescript

This will install TypeScript globally

B. Getting Started

Include All Necessary Files

At the top of the main HTML (e.g. index.html) we need to add a reference to the jquery.js library. Next we need to add a reference to jqxcore.js. After that we can add the .js files for the jqxWidgets that we want to use. Finally, we need to include the app.js file that was compiled from the app.ts file. The contents of "app.ts" will be explained in detail further ahead in the article.

The index.html file must contain the following libraries in it's header in that order:

jquery.js;
jqxcore.js;
jqxdata.js;
jqxtooltip.js;
jqxbulletchart.js;
app.js;

Create The Widget

Add a reference to jqwidgets.d.ts in the app.ts file.

Next we need to create a function that will be invoked from the index.htm. A different number of arguments (selectors) can be passed to the function depending on how many widgets will be used. In the current example we need to pass only one argument, the id of the DOM element that will be used for the particular widget.

Set the options for the widget in an object of type: "jqwidgets.WidgetNameOptions":

To create an instance of the widget use jqwidgets.createInstance(selector, widgetName, options).

selector - string ('#container')
widgetName - string ('jqxBulletChart')
options - object (options)

Binding to events

Method usage

Note: To compile manually "app.ts" to "app.js".

tsc app.ts

You need to use this command every time you make changes in app.ts.
Another way is to use a plug-in to do this automaticly.

tsc app.ts --out app.js --watch

This command will recompile 'app.ts' every time you save the file.

Set a property or properties using myWidget.setOptions(params: any)

Get the value of a property

C. Example Files

index.htm

app.ts