TypeScript Support

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

Watch Video

Reference TypeScript Definitions

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

/// <reference path="TypeScript/jquery.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 Chart widget. Available types along with their namespaces are listed below.

  • DevExpress.viz.charts.dxChartOptions - Chart
  • DevExpress.viz.charts.dxPieChartOptions - PieChart
  • DevExpress.viz.charts.dxPolarChartOptions - PolarChart
  • DevExpress.viz.treeMap.dxTreeMapOptions - TreeMap
  • DevExpress.viz.gauges.dxCircularGaugeOptions - CircularGauge
  • DevExpress.viz.gauges.dxLinearGaugeOptions - LinearGauge
  • DevExpress.viz.gauges.dxBarGaugeOptions - BarGauge
  • DevExpress.viz.rangeSelector.dxRangeSelectorOptions - RangeSelector
  • DevExpress.viz.sparklines.dxSparklineOptions - Sparkline
  • DevExpress.viz.sparklines.dxBulletOptions - Bullet
  • DevExpress.viz.map.dxVectorMapOptions - VectorMap

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


... Knockout binding ...

var viewModel = {
    chartOptions: options

<div data-bind="dxChart: chartOptions"></div>

... or AngularJS directive.

function Controller($scope) {
    $scope.chartOptions = options;
<div ng-controller="Controller">
    <div dx-chart="chartOptions"></div>
TypeScript is only for declaring 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 Chart widget.

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

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