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 file along with jQuery and Globalize TypeScript definition files 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.viz.charts.dxChartOptions;
    options = {
        dataSource: [
            { fruit: 'Oranges', total: 10 },
            { fruit: 'Apples', total: 15 },
            { fruit: 'Bananas', total: 9 }
        ],
        series: { argumentField: 'fruit', valueField: 'total' }
    };  
};

Any configuration object should have a specific type. In this example, the options object has the dxChartOptions type, which configures the dxChart widget. Available types along with their namespaces are listed below.

  • DevExpress.viz.charts.dxChartOptions - dxChart
  • DevExpress.viz.charts.dxPieChartOptions - dxPieChart
  • DevExpress.viz.charts.dxPolarChartOptions - dxPolarChart
  • DevExpress.viz.gauges.dxCircularGaugeOptions - dxCircularGauge
  • DevExpress.viz.gauges.dxLinearGaugeOptions - dxLinearGauge
  • DevExpress.viz.gauges.dxBarGaugeOptions - dxBarGauge
  • DevExpress.viz.rangeSelector.dxRangeSelectorOptions - dxRangeSelector
  • DevExpress.viz.sparklines.dxSparklineOptions - dxSparkline
  • DevExpress.viz.sparklines.dxBulletOptions - dxBullet
  • DevExpress.viz.map.dxVectorMapOptions - dxVectorMap

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

$('#chartContainer').dxChart(options);  

... Knockout binding ...

var viewModel = {
    chartOptions: options
};

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

... or AngularJS directive.

function Controller($scope) {
    $scope.chartOptions = options;
}
HTML
<div ng-controller="Controller">
    <div dx-chart="chartOptions"></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.viz.WidgetName type. For example, see how you can obtain the instance of a dxChart widget.

var chartInstance: DevExpress.viz.dxChart;
chartInstance = $('#chartContainer').dxChart('instance');

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