CODEWITHSUNDEEP
typescriptjs-amddgrid
camelCase
camelCase

Reputation: 1780

Import syntax for reference to dgrid from TypeScript

I am learning TypeScript and Dojo in parallel and this has exposed my limited understanding of AMD. I do not understand how to tie together an import statement to the 3rd party "dgrid/Grid" AMD module, my dgrid.d.ts stub declaration and my consuming class. After 2 days of wasted effort I am looking for any means (hacky or amd best practice) to execute the following:

MyModule.ts

{
    ...
    var myGrid = new dgrid.Grid( { /*col structure*/}, "divId");
    ...
}

Here is my stub declaration file for dgrid.

dgrid.d.ts (edited to sync with Update 1 below)

module "dgrid/Grid"
{
    export class Grid
    {
        constructor ( gridStructure: any, elementId: string);
    }
}

I tried the following references in my consuming TypeScript class but Visual Studio underlines the "dgrid/Grid" literal in red because I guess the TS compiler is unaware of the classic Dojo dojoConfig, baseUrl and dgrid package declarations in the default.htm file.

///<reference path='dgrid.d.ts' />

import Grid = module("dgrid/Grid");

module MyModule
{
   ...
}

Update 1 Since posting I read through chapter 10 in the official TypeScript manual. Previously I had failed to recognise the significance of modules declared as module MyType{} or module "external/thirdparty" {}. An ambient declaration for an external module should be a literal.

Background:

Require statement:

require(["dgrid/Grid", "dojo/domReady!"],
    function(Grid){

Upvotes: 1

Views: 2952

Answers (2)

Valentin
Valentin

Reputation: 8074

The following (slightly changed) version of your code compiles fine for me:

MyModule.ts

///<reference path='./dgrid.d.ts' />
module MyModule {
    var gridInstance : dgrid.Grid = new dgrid.Grid("test1", "test2");
}

dgrid.d.ts

module dgrid
{
    class Grid
    {   
        constructor ( gridStructure: any, elementId: string);
    }   

}

The ///<reference path='...'/> construct brings the internal module dgrid into scope. Prefixing the type name with the name of the module does the job.

Upvotes: 1

Fenton
Fenton

Reputation: 250882

My first though would be to check that the file is in the locations you think it is for this statement to work:

///<reference path='dgrid.d.ts' />

Is the dgrid.d.ts file in the same folder as your module .ts file?

Update:

Should you module declaration be:

module dgrid {
    export class Grid {
        constructor ( gridStructure: any, elementId: string) {

        }
    }
}

Upvotes: 0

Related Questions