CODEWITHSUNDEEP
typescript
Johnny
Johnny

Reputation: 7321

Cannot find symbol when referencing d.ts file

I'm trying to use Backbone.js with my Typescript code. When I add the import tsc fails to compile my code with child.ts(12,8): error TS2304: Cannot find name 'Animal'..

Here's the main.ts file:

export module A.B {
    export class Animal {

        constructor(argument) {
            // code...
        }

        go() : string {
            return 'snow';
        }
    }
}

And here's the child.ts file referencing it:

/// <reference path="main.ts" />
/// <reference path="jquery.d.ts" />
/// <reference path="underscore.d.ts" />
/// <reference path="backbone.d.ts" />

import Backbone = require("backbone");

module A.B {
    class Snake {

        constructor(argument) {
            new Animal(argument).go();
        }
    }
}

If I remove the import child.ts compiles fine. What am I doing wrong?

Upvotes: 1

Views: 3809

Answers (2)

Johnny
Johnny

Reputation: 7321

Here's how I ended up solving it:

module AA.BB {
    export class Animal {

        constructor(argument) {
            // code...
        }

        go() : string {
            return 'snow';
        }
    }   
}

And:

/// <reference path="Animal.ts" />
/// <reference path="../../../keyword-exploration/public/typescript/definitions/jquery.d.ts" />
/// <reference path="../../../keyword-exploration/public/typescript/definitions/underscore.d.ts" />
/// <reference path="../../../keyword-exploration/public/typescript/definitions/backbone.d.ts" />

module AA.BB {
    class Snake extends Backbone.View<Backbone.Model> {

        constructor(argument) {
            super(argument);
            new AA.BB.Animal({});

        }
    }   
}

Note that there's no need for a require statement for Backbone.js.

Upvotes: 0

Fenton
Fenton

Reputation: 250882

You are mixing internal and external modules. This creates a problem because the module A.B in your app.ts file is not in the "same common root" as the module A.B in your main.ts file.

Mixed Mode

Not really recommended... and you can't supplement the internal module from within an external module...

main.ts (internal module)

module A.B {
    export class Animal {

        constructor(argument) {
            // code...
        }

        go(): string {
            return 'snow';
        }
    }
}

app.ts (external - wrapped within a define function)

/// <reference path="main.ts" />
/// <reference path="scripts/typings/backbone/backbone.d.ts" />

import Backbone = require("backbone");

module X {
    class Snake {

        constructor(argument) {
            new A.B.Animal(argument).go();
        }
    }
}

Internal Modules

You can't use import statements, so you'd have to load the modules yourself (i.e. in script tags).

main.ts (note, we don't export the module)

module A.B {
    export class Animal {

        constructor(argument) {
            // code...
        }

        go(): string {
            return 'snow';
        }
    }
}

app.ts

/// <reference path="main.ts" />

module A.B {
    class Snake {
        constructor(argument) {
            new Animal(argument).go();
        }
    }
}

Go External Modules!

You can use module loading - on your own code too. Everything is kept out of the global scope.

main.ts

export class Animal {

    constructor(argument) {
        // code...
    }

    go(): string {
        return 'snow';
    }
}

app.ts

import Main = require("main");

class Snake {

    constructor(argument) {
        new Main.Animal(argument).go();
    }
}

Upvotes: 3

Related Questions