React / Typescript / TSX

Webix JS
1

Hi there,

New to these technologies but have got working samples in React and am now trying to integrate Webix controls in them.

So trying to get the basic sample custom component working. I have this:

import * as React from 'react';
import '../components/webix/webix.js'
import '../components/webix/webix.css'

class FirstSlider extends React.Component {
    render() {

        const ui = {
            view: "slider"
        };
        const value = 123;

        const SliderView = () => (
            <Webix ui={ui} data={value} />
        )

        return (
            <div>
                {SliderView}
            </div>
        )
    }
}

where this a tsx file. Typescript doesn’t like the Webix tag and fails with “cannot find name Webix…”

I know this is a basic question but what am i missing? I have been though the typescript and react samples provided but there are none with both technologies together.

Any help appreciated!

Mike

2

You need to allow the namespace in tsconfig file, the following discussion may be helpful.

3

Hi Helga,

Well I spent the day trying to understand what is going on, the link although useful is related to angular and I have no further clarity on my issue.

I have isolated the problem though. When I get the sample Typescript code code from GitHub - webix-hub/typescript-demo: Using Webix UI with typescript the code compiles and works fine using NPM. Inside Visual Studio, I can also run the sample fine too! But VS gives me 30 compilation errors with:

"TS2503 (TS) Cannot find namespace 'webix'."

tsconfig looks like this:

{
    "compilerOptions": {
    	"module": "commonjs",
        "target": "es5",
        "lib": ["es2015", "dom"],
        "types": ["webix"],
        "sourceMap": true
    },
    "files":[
        "sources/**/*.ts",
        "node_modules/webix/webix.d.ts"
    ]
}

And running tsc does not yield any errors. What am I missing?

Looking very much to your feedback!

Cheers,

Mike

4

Hi Helga,

I have found how to resolve the above issue, now it’s simply a question of how to get past the:

import * as Webix from ‘webix’;

“TS2306 (TS) File ‘C:/TicToc/TTIL/T3/TicToc.Ttil.Web/node_modules/webix/webix.d.ts’ is not a module.”

How should I import the file to get TypeScript functionality with Webix?

Regards,

Mike

5

@Mike1d https://forum.webix.com/discussion/32709/webpack-integration

6

Hi @intregal ,

Thanks for the input, I now understand how to use aliases to point to the webix file locations and this has been useful.

So using:

import “webixMain”;
import “webix/skins/flat.css”;

includes the files in my component but the line:

const SliderView = () => (

)

results in a TypeScript error “Cannot find name ‘Webix’” which makes sense because I only imported the script. And if I change to:

import Webix from “webixMain”;

results in a TypeScript error “Cannot find module ‘webixMain’” which makes sense because it’s not. If it could find the module I am sure it would say “is not a module” like previous post because clearly the webix types are not defined as a module.

How to get the TypeScript aspect working?

As you can I am travelling in circles atm and lacking the understanding! Hope you can shed some insight!

Cheers,

Mike

7

Webix should be used lowercase → webix
check your code for typo

P.S.: do you mean that only this code leads to error?

const SliderView = () => (

)
8

Rewriting…

9

const SliderView = () => (

)

Changing to lowercase webix → results in 'property webix does not exist on type ‘JSX.IntrinsicElements’.

The issue I described above is about the tag that is not recognised by TypeScript. It is not imported as a module anywhere and therefore not recognisable.

Sorry the tag got stripped…

10

I think you did not import Webix view
import Webix from './Webix';

11

Hey @intregal,

I have broken down the problem. Can you explain how to render the sliderview (mike) in this example .ts file.

import * as wins from "./index";

class Greeter {
    element: HTMLElement;
    span: HTMLElement;
    timerToken: number;

    constructor(element: HTMLElement) {
        this.element = element;
        this.element.innerHTML += "The time is: ";
        this.span = document.createElement('span');
        this.element.appendChild(this.span);
        this.span.innerText = new Date().toUTCString();
    }

    start() {
        this.timerToken = setInterval(() => this.span.innerHTML = new Date().toUTCString(), 500);

        var mike = webix.ui({
            view: "slider",
            label: "Level",
            value: "20",
            min: 10,
            max: 120,
            name: "s44"
        });

    }

    stop() {
        clearTimeout(this.timerToken);
    }
}

window.onload = () => {
    var el = document.getElementById('content');
    var greeter = new Greeter(el);
    greeter.start();
};

I have obviously missed something completely!!

You help has been much appreciated!

Cheers Mike

12

I think you missed to define the container for slider.
depending on your sample it should be something like

var mike = webix.ui({
        container: this.element, //or any other element or id
        view: "slider",
        label: "Level",
        value: "20",
        min: 10,
        max: 120,
        name: "s44"
    });

https://docs.webix.com/api__link__ui.slider_container_config.html

13

Yes! Thank you, I appreciate that and have made great progress now :slight_smile: