Using TypeScript

Typescript is supported by Webix Jet since version 1.3. Benefits of combining Webix Jet and TypeScript:

• a smart autocomplete for Webix methods,

• hints on the use of methods,

• code validation.

You can find the demo of using TypeScript in the typescript branch of the Jet starter pack.

Configuring the Toolchain

Adding tsconfig.json

tsconfig.json file must specify the files of your project and compiler options. Create the file and add paths to models and views to the object with compiler options:

// tsconfig.json
{
    "compilerOptions": {
        ...
        "paths": {
            "models/*":["models/views/*"],
            "views/*":["sources/views/*"]
        }
    },
    ...
}

Typing definitions for Webix widgets, mixin interfaces and parameters for methods are stored in the webix.d.ts file. Add it to files in tsconfig.json:

// tsconfig.json
{
    ...
    "files":[
        "node_modules/webix/webix.d.ts"
    ]
}

Also include your source .ts files:

// tsconfig.json
{
    ...
    "include":[
        "sources/**/*.ts"
    ]
}

Configuring Webpack

Go to webpack.config.js and change the entry point and other .js files to .ts, e.g.:

// webpack.config.js
const config = {
    entry: "./sources/myapp.ts",
    ...
    resolve: {
        extensions: [".ts", ".js"],
        ...
    }
}

Use a different transpiler: ts-loader instead of babel-loader:

// webpack.config.js
const config = {
    ...
    module: {
        rules: [
            {
                test: /\.ts$/,
                loader: "ts-loader"
            },
            ...
        ]
    }
}

Updating Dependencies

Don’t forget to update dependencies in package.json:

// package.json
"devDependencies": {
    ...
    "ts-loader": "^3.2.0",
    "tslint": "^5.9.1",
    "typescript": "^2.6.2",
    ...
},
"dependencies": {
    "webix-jet": "^1.3.7"
}

Changes in the Codebase

All view and model files now must have the .ts extension. There is no need to change anything in files, as webix-jet is imported in the usual way and typings are enabled automatically.

If you want to use the APPNAME and VERSION defined in package.json, declare constants injected by webpack in the app.ts file:

// sources/app.ts
import {JetApp} from "webix-jet";
import "./styles/app.css";

declare var APPNAME;
declare var VERSION;

webix.ready(() => {
    const app = new JetApp({
        id: APPNAME,
        version: VERSION,
        start: "/top/start"
    });
    app.render();
});

Codebase Validation

Typescript toolchain includes the tslint tool, which can be used to validate your code and ensure its quality. To enable it, add tslint.json with validation rules for TypeScript into your project.

After that, include a script for linting into package.json:

"scripts": {
    "lint": "tslint -p tsconfig.json",
    ...
}

Now you can run npm run lint to validate the codebase of your app.