Need a little help getting GO working with Typescript/Require

Hi All, new user to GoJS here.

I’m currently working on a project where we are trialing GoJS for use in a major piece of software being written.

This project is created using a mixture of .NET(NancyFX) on the back end, and Typescript/KnockoutJS/RequireJS on the front end.

I’ve used NuGet to install the trial versions of GoJs and the GoJs typescript definitions, but upon trying to use GoJs in any of my typescript files, the TS compiler (and Visual Studio intellisense) absolutely refuse to find the TS definition files.

My Require statement consistently has a red squiggle under it telling me that “go” cannot be found, even though I can clearly see the file is available and referenced in my project/solution correctly.

This refusal to find the GoJs typescript defs even continues when I drag the reference from the Visual Studio solution explorer directly onto my TS file, so there is an absolute reference.

Thinking it might be a Visual Studio quirk, I tested this outside VS and did a manual build at the command line using MS-Build, and this also failed stating that GoJs (or “go”) could not be found…

For reference, here is my require configuration:

var require = {
    baseUrl: resolveAbsolutePath('/scripts'),
    urlArgs: "bust=" + new Date().getTime(),
    paths: {
        'bootstrap': "bootstrap.min",
        'jquery': "jquery-2.1.4.min",
        'jqueryui': "jquery-ui-1.11.4.min",
        'knockout': "knockout-3.3.0",
        'knockout.mapping': "knockout.mapping-latest",
        'knockout.postbox': "knockout.postbox.min",
        'text': "text",
        'moment': "moment.min",
        "go": "go"
    },
    shim: {
        'bootstrap': {
            exports: "$.fn.tab",
            deps: ['jquery']
        },
        'jqueryui': {
            deps: ['jquery']
        },
        'knockout.mapping': {
            deps: ['knockout']
        },
        'knockout.postbox': {
            deps: ['knockout']
        }
    }
}

Everything else referenced in the require config file works and is referenced fine.

Here is a small snippet of code, that refuses to recognise that GoJs exists

/// <reference path="../../../typings/gojs/gojs-1.5.12.d.ts" />

import $ = require("jquery");
import ko = require("knockout");
import go = require("go");

ko.components.register("testcomponent", {
    require: "Application/Components/TestComponent"
});

ko.applyBindings();

$(document).ready(() => {

    //alert("I are ready");

    var gojs = go.GraphObject.make;
    var myDiagram = gojs(go.Diagram, "myDiagramDiv");

});

I am using knockout components but this test is in a stand alone TS file, once I know I can integrate it into the project, then I’ll start using it inside various components, but for now this simple example is included directly in an html file using

<script src="/requireconfig"></script>
<script data-main="/Scripts/Application/Views/Test/Index.js" src="/requirejs"></script>

Any help or ideas anyone has would be greatly received. We really do want to use GoJs for this project, and the company I’m working with are standing by ready to purchase licences , but only if we know we can make it work the way we need too.

Regards
Shawty

Update (Approx 60 mins later)

After fiddling with this some more I now have managed to get GoJs working, but in order to do so I’ve actually had to change the “goJS-1.5.12.d.ts” file shipped with the NuGet package.

This is not idea because as soon as we do a NuGet update those changes will be lost.

right at the end of the TS defs file (Just after the final closing } ), I’ve added the following

declare module "gojs" {
    export = go;
}

By doing this, I can now reference GoJs in my typescript file by using the following:

import gojs = require("gojs");

As a result, I’ve also had to change “go” to “gojs” in Require configuration, so that require can now find and load “go.js” from my scripts folder.

Finally, adding the following to my TS file

var GO = gojs.GraphObject.make;
var myDiagram = GO(go.Diagram, "myDiagramDiv", {
    initialContentAlignment: go.Spot.Center,
    "undoManager.isEnabled": true
});

var myModel = GO(go.Model);

myModel.nodeDataArray = [
    { key: "Alpha" },
    { key: "Beta" },
    { key: "Gamma" },
];

myDiagram.model = myModel;

Means that I can now use GoJs features from my Typescript module.

If anyone has any insight into why I’ve had to change the d.ts file to make this work, it would be greatly appreciated, as a feel I really shouldn’t have needed to do things the way I have.

Shawty

We’ll look into this.

Many thanks.

If you want a sample project that’s structured the same way this one is (So you can see my overall app structure) you can find one on my git hub page at:

The project currently does NOT have GoJs installed in it, but it is set up and works the same way as the project I’m currently working on that has the issue with GoJs

Cheers
Shawty

I haven’t tried this yet, but I suspect the gojs.d.ts file could end with:

declare module "go" {
    export = go;
}

I notice that other libraries do this. So then you could do:

import go = require("go");
var myDiagram = go.GraphObject.make(go.Diagram, "myDiagramDiv");

Thanks for prodding us into looking at supporting modules with TypeScript.

Hi Walter, that does indeed work.

Cheers
Shawty

That will be in version 1.5.13, so if you update to a newer version, you’ll get this in the newer goJS.d.ts file.