TypeScript Integration

The Webix library provides a possibility to use Webix widgets with TypeScript.

Webix type definitions of widgets and mixin interfaces are stored in the webix.d.ts declaration file, which is included in the main Webix package. The mentioned file allows you to use static typing with Webix.

Using Webix with Typescript

You can find an example of using Webix with TypeScript on GitHub.

There is also a thorough tutorial on creation of the provided demo and more details on using Webix with TypeScript in the related blog article.

Using Webix Jet with Typescript

There is also an example of using Webix Jet with Typescript. You can check it by the following link on Github.

Typing within Webix Widgets

You need to explicitly set the type of a Webix widget during initialization as webix.ui.{widget}:

const layout = <webix.ui.layout> webix.ui({
    rows:[ toolbar, datatable, pager] 
});

And for using its methods and events after initialization:

const grid:webix.ui.datatable = layout.getChildViews()[1];
grid.add({ title:"New film"}, 0);
 
//or
 
const grid = (<webix.ui.datatable>layout.getChildViews()[1]);
grid.add({ title:"New film"}, 0);

Or, when accessing the widget by its id:

(<webix.ui.datatable>webix.$$("mygrid")).add({ title:"New film"}, 0);

You also need to set a widget type while attaching handler functions to widget events:

const grid:webix.ui.datatable = layout.getChildViews()[1];
grid.attachEvent("onAfterSelect", function(){...});

Typing for Widgets Configuration

You can provide correct types for widget properties with the related webix.ui.config{Widget} types:

const datatable:webix.ui.datatableConfig = {
    view:"datatable",
    editable:true,
    editaction:"dblclick",
    autoConfig:true,
    url:"..",
    pager:"pagerA",
    scrollX:"false"
};
 
const pager:webix.ui.pagerConfig = {
    view:"pager",
    id:"pagerA",
    group:10,
    size:30
}; 
 
const layout= <webix.ui.layout> webix.ui({
    rows:[ datatable, pager ] 
});

Creating Custom Widget with Strict Typing

You can specify strict types while creating a custom widget, namely:

Adding a custom property to configuration:

interface IconCheckConfig extends webix.ui.checkboxConfig{
    icon?:string;
}

Adding or overriding methods and properties in the prototype:

interface IconCheckApi{
    name:string;
    $init(config:IconCheckConfig):void;
    getIconLabel(icon:string, label:string):string;
}
 
interface IconCheckView extends webix.ui.checkbox, IconCheckApi {}

Creating a new proto UI:

const api:IconCheck = { 
name:"iconcheck",
    $init:function(config){
        config.label = (<IconCheckView>this).getIconLabel(config.icon, config.label);
        config.labelWidth = 100;
    },
    getIconLabel:function(icon, label){
        return "<span class='webix_icon fa-"+icon+"'></span>"+label;
    }
};
 
webix.protoUI(api, webix.ui.checkbox);

Using the custom widget:

const iconcheckbox = <IconCheckView> webix.ui({
    view:"iconcheck",
    icon:"cog",
    label:"Settings"
});