TypeScript Support

Instead of JavaScript, you can use TypeScript to configure and access DevExtreme widgets. This topic shows how to do it.

Watch Video

Reference TypeScript Definitions

You can find the file with TypeScript definitions for DevExtreme in your DevExtreme Complete package or on GitHub. Add this file to your project. Then, reference this and jQuery TypeScript definition file in your .ts-file.

/// <reference path="TypeScript/jquery.d.ts" />
/// <reference path="TypeScript/globalize.d.ts" />
//  File from the package...
/// <reference path="TypeScript/dx.all.d.ts" />
//  ...or file from GitHub
/// <reference path="TypeScript/devextreme.d.ts" />

You can also reference TypeScript definitions for Knockout or AngularJS.

/// <reference path="TypeScript/knockout.d.ts" />
/// <reference path="TypeScript/angular.d.ts" />
/// <reference path="TypeScript/angular-sanitize.d.ts" />

Along with TypeScript definitions, you need to reference the libraries themselves. See the Installation guide for detailed information.

Configure a Widget

The following code example shows how to declare a widget configuration object using TypeScript.

window.onload = () => {
    var options: DevExpress.ui.dxButtonOptions;
    options = {
        text: 'Submit'
    };
};

Any configuration object should have a specific type. In this example, the options object has the dxButtonOptions type, which configures the dxButton widget. All the types of DevExtreme widget configuration objects are declared in the DevExpress.ui namespace. The type names are formed by concatenating the widget name (e.g. dxButton) and Options.

After you have declared a configuration object, pass it to the jQuery plugin ...

$('#buttonContainer').dxButton(options);  

... Knockout binding ...

var viewModel = {
    buttonOptions: options
};

ko.applyBindings(viewModel);
HTML
<div data-bind="dxButton: buttonOptions"></div>

... or AngularJS directive.

function Controller($scope) {
    $scope.buttonOptions = options;
}
HTML
<div ng-controller="Controller">
    <div dx-button="buttonOptions"></div>
</div>

NOTE: TypeScript is only a way to declare a widget configuration. You still need to use jQuery, Knockout or AngularJS to apply this configuration.

Access a Widget

To access a widget, you need to obtain its instance first. Note that the variable that will contain the widget instance should have a DevExpress.ui.WidgetName type. For example, see how you can obtain the instance of a dxButton widget.

var buttonInstance: DevExpress.ui.dxButton;
buttonInstance = $('#buttonContainer').dxButton('instance');

Now that you have the widget instance, use jQuery to change widget options, call methods or handle events.