Интеграция с TypeScript

Вы можете использовать TypeScript при разработке на Webix.

Миксины и типизации Webix виджетов хранятся в файле webix.d.ts, который включен в стандартный пакет библиотеки. Этот файл позволяет использовать статическую типизацию при работе с виджетами.

Как использовать Webix вместе с TypeScript

С примерами интеграции можно ознакомиться в этом репозитории.

В этой статье вы найдете подробное описание с наглядными примерами использования Webix вместе с TypeScript.

С примерами интеграции Webix Jet и TypeScript можно ознакомиться в этом репозитории.

Типизация Webix виджетов

Вам необходимо явно указать тип виджета при его инициализации через webix.ui.{widget}:

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

А также, чтобы использовать его методы и события после инициализации:

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

Или же вы можете получить доступ к виджету через его ID:

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

Вам необходимо указать тип виджета при установке обработчиков на его события:

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

Типизация для конфигурации виджета

Вы можете задать необходимые типы для свойств виджета внутри объекта его конфигурации через webix.ui.сonfig{Widget}:

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 ] 
});

Как создать кастомный виджет со строгой типизацией

При создании кастомных виджетов вы можете указывать строгую типизацию, а именно:

при добавлении кастомных свойств в объект конфигурации

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

при добавлении или переопределении методов и свойств в прототипе

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

при создании нового protoUI

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);

при использовании кастомного виджета

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

Наверх