Circular Dependencies in Typescript

Question

I am having trouble declaring circular dependencies in Typescript. Here,s the code:

//Widget.module.ts

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

export module Widget {

    class Widget {

    }
}

//Buttons.ts

/// <reference path="Widget.module.ts" />

class Button extends Widget{
   function x(){
     ...
   }

   ...

}

In this, arrangement I want to have a main file defining a module and then a number of files referenced to, from that main file. These files could contain a number of classes that call, instantiate or inherit from each other.

Currently I am getting this error on the line containing "extends Widget" in the source Buttons.ts - whether I not its contained inside an exported module.

Could not file symbol widget

--Update--

The reason I want to use reference tags instead of import/require is that I want to compile these separate Typescript files into a single javascript file using the --out flag in the typescript compiler.

Answer 1

I'm assuming your two files are in the same folder?

From the current code, I can't understand why you'd want to reference Button.ts in the Widget.module.ts file, but that's not the point.

You are not including the Widget.module file, you are only referencing it. Referencing TypeScript files can only be used for type declarations, not implementations.

Change your code to:

import Widget = require("Widget.module");

class Button extends Widget.Widget {
   x() {
     // ...
   }

   // ...
}

Note that you need to reference the class as Widget.Widget as you are exporting the module, not the class. Also, in case you are building a web application you'll need a module loader to load in the widget module. In that case, take a look at RequireJS.

---

Update: The benefit of the reference tags is that you are able to reference types without having to import them. This can be useful

1. in case you want to use an existing JavaScript library in your TypeScript code
2. or for your own code.

In the latter case, assume for example you have other code that expects a variable to be of the type Button but you do not actually require the class itself.

class MyClassThatReferencesButtonButDoesNotActuallyNeedsTheImplementation {
    myMethodThatExpectsAButton(someVar:Button) {
        someVar.text = "My button!";
    }
}

The class does not need the implementation of Button, it just needs to know what properties and methods are available on it. The advantage becomes more clear when you understand that in case Button was imported rather than referenced, it needs to be loaded by a JavaScript module loader.

In the first case, let's say your Button class requires jQuery. Are you going to include jQuery together with your class? Or are you going to assume this is globally available? In essence, this is the same case as the one above: you don't need a TypeScript implementation of jQuery, you just need to know what properties and methods are available, hence you'll just reference a definition file for jQuery.

The --out flag is only useful to include referenced files. In case you have imported modules, you'll need to compile all files and then use the RequireJS optimizer to build your output to a single file.