Join the Stack Overflow Community
Stack Overflow is a community of 6.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up

I am currently trying to use NeXt UI Toolkit with Angular2+Typescript, and there are no examples (that I have found) of how to do this online. I am very new to Angular2+TypeScript, so I was hoping one of you Angular pros could help me find a solution to my problem.

So, when using NeXt UI Toolkit, classes are defined in the following way:

nx.define("ClassName", nx.ui.Component, {
    properties: {
        // class properties defined here
    },
    methods: {
        "helloWorld": function() {
            console.log("Hello World!");
        }
        // class methods defined here
    },
    events: {
        // events (i.e. onClick) defined here
    }
});

And then, in normal Javascript, you can later use these classes as normal.

var class = new ClassName();
class.helloWorld(); // this will print "Hello World!" to the console

This is fine, until I try converting the above code to TypeScript. In TypeScript, if I attempt to instantiate a class I created using nx.define() as above, it will say that it can't resolve the name ClassName. The normal way to create classes in Angular2 is to export them, so logically I try and convert the syntax of nx.define() to an exported class as shown below. It is also important to note that I must declare the variable nx at the top in order to reference the nx class from the next.js file. This allows me to work with the rest of the library just fine (i.e. initializing the application and topology), I just can't find a way to extend classes from the NeXt library.

import { Component } from '@angular/core';
declare var nx: any;

@Component({
    ...
})
export class ClassName extends nx.ui.Component {
    constructor() {
        super();
    }
}

Now, with the above code, Typescript will complain about the nx.ui.Component class that I am extending from, saying "[ts] Type 'any' is not a constructor function type."

So basically, my question is: what is the correct way of converting nx.define() to TypeScript if this is not the correct way?

I apologize if I was not able to explain this very clearly, as I am very new to Angular2+TypeScript, as well as JavaScript in general. I can provide additional information if needed.

EDIT: I've found a working solution, however it doesn't allow me to stick to using pure Angular2+TypeScript so it isn't entirely ideal. Anyway, my solution works like this.

Similarly to how I declare a global variable named nx in order to reference the nx class from the NeXt library, I do the same for any classes or variables I wish to use that are defined in a separate JavaScript file. So, using my example scenario from above, I could have a file named ClassName.js (the filename actually doesn't matter here) with the following contents:

nx.define("ClassName", nx.ui.Component, {
    properties: {
        // class properties defined here
    },
    methods: {
        "helloWorld": function() {
            console.log("Hello World!");
        }
        // class methods defined here
    },
    events: {
        // events (i.e. onClick) defined here
    }
});

This code should look familiar, because it's the same code I used to define my class using nx.define() from above. Now, in a TypeScript file I can declare a variable named ClassName (the variable name must be the same as the class) like so:

import { Component } from '@angular/core';
declare var nx: any;
declare var ClassName: any;

@Component({
    ...
})
export class Main {
    constructor() {
        var className = new ClassName();
        console.log(className.helloWorld());
    }
}

This will result in "Hello World!" being printed to the console successfully. I can also use variables and functions from JS files in TS in this exact same way. However, you MUST add any JavaScript file you want to use to your HTML.

share|improve this question

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.