8

I can't figure out if it even possible to have an "export module" spread accross multiple files.

If I have file Contact.ts:

// file Contact.ts
export module Contacts {
   export class Contact {
      ...
   }
}

and another ContactView.ts

// file ContactView.ts
export module Contacts {
   export class ContactView {
      model: Contact;  // <---  is not recognized
   }
}

Then TSC is not recognizing the Contact class. As you can see the Contact and the ContactView are declared to reside in the same module and according to the spec it should work.

I'm building a composite app that uses the require.js and AMD patterns so I HAVE to use the "export module" declaration.

Should I do some type of "ahead declaration" or some tricky "import" ?

Thanks for the advise.

EDIT: Currently I load each module separately via import, but, if you'll notice, it creates an enormous waste of code and lot of "import" dependencies. My question was if there is a way to use the same namespace (i.e. Contacts) to let know the TS that I do not mean to import. I was looking into the normal // command, but it doesn't work. I even tried the *.d.ts declaration files with no success so far.

2 Answers 2

6

The spec allows you to define internal modules across multiple files (in essence, internal modules refer to the javascript module pattern). External modules, such as AMD or CommonJS modules, work on the idea that each file is the actual "module of code", and the namespacing/naming within it is irrelevant since the module will be loaded into its own new object anyway.

You could write the following code to load the Contact.ts module inside of the ContactView.ts module:

// file ContactView.ts    
import mod = module("./Contact");

export module Contacts {
   export class ContactView {
      model: mod.Contacts.Contact;  // <---  will be recognized
   }
}

And that should work well enough, but if you wanted to have access to the contents of both modules in another area (to for example make a new Contact model yourself), you would have to essentially import both of them:

import c = module("./Contact");
import cv = module("./ContactView");

Which I think is fine enough, because you're clearly stating your dependencies. The downside is that they wont share a common parent object, so having them both be in a "Contact" module-pattern probably isn't of great use.

Another option is to export "Contact" along with "ContactView", as follows (granted this code is kind of silly because you're already doing exactly that via the model property of ContactView, but never the less...):

export module Contacts {
   export class ContactView {
       model: mod.Contacts.Contact;
       constructor() {
           this.model = new mod.Contacts.Contact();
       }
    }

    export var Contact = mod.Contacts.Contact;
}

So you'd be able to access it after having loaded ContactView.

EDIT: By the way, you aren't limited to only exporting modules via "export module Name { ... }", you can export anything as the file itself is the module. So you could have a file which just has "export function foo() { ... }" without any module-pattern code wrapping it.

EDIT2: It looks like AMD might have functionality for loading multiple dependencies and constructing "modules" from those, but I have no idea how that would work in TS, here's a link that goes over that: http://www.adobe.com/devnet/html5/articles/javascript-architecture-requirejs-dependency-management.html (Constructor modules).

5
  • This is exactly what I do right now - load each module separately via import, but, if you'll notice, it creates an enormous waste of code and hundreds of dependencies. My question was if there is a way to use the same namespace (i.e. Contacts) to let know the TS that I do not mean to import. I was looking into the normal //<reference> command, but it doesn't work.
    – IgorM
    Oct 9, 2012 at 14:22
  • 1
    In that case, do not export the module Contacts, just define it as 'module Contacts { ... }' across all your files, use ///<reference .. /> (this works for internal modules) to help TS find them, and create a new file for the AMD module that just has 'export var contacts = Contacts;' in it so you can load the entire thing via AMD. you'll have to make sure that the var you're exporting isn't the same exact name as the module, otherwise the code emitted will not work. I can't unfortunately write up a code demo for this at the moment, but I can do so later if need be.
    – nxn
    Oct 9, 2012 at 16:25
  • Thinking about it some more, you might need to create a makefile that outputs each module into it's own js file.
    – nxn
    Oct 9, 2012 at 16:34
  • 2
    github.com/nxn/ModuleDemo/tree/master/ModuleDemo <- not exactly how I planned it, the "export var ModuleName" thing didn't work, so I just wrote the module export code in vanilla JS (all it does is a simple assignment so it shouldn't matter). This has to be compiled with the included make.bat file so the files get created properly -- i.e., one file per module, even though the TS implementation spans multiple files.
    – nxn
    Oct 9, 2012 at 23:23
  • Your demo was extremely helpful in getting the right setup. Thanks a lot!
    – parliament
    Apr 6, 2013 at 5:24
4

I struggled with the same question for a while, and just wanted to share what I am doing in case anyone else wanders across this question.

First, I defined myself a reference file that declares all of the files in my module:

/// <reference path="_contacts.dependencies.ts" />
/// <reference path="../contacts/Contact.ts" />
/// <reference path="../contacts/ContactView.ts" />
/// <reference path="../contacts/ContactModel.ts" />

Note that paths specified inside the file are relative to the location of the reference file itself (_contacts.ts), unlike a .js reference file. My directory structure looks like this:

modules
    references // all of the reference files
        knockout 
        underscore
        // ... a subfolder for every 3rd party library used
    contacts
    commerce 
    // ... other modules at same level as contacts

Back to the reference file itself. The first line includes a separate reference file listing all of the external libraries used by the module, such as underscore, moment or any other existing library you have a .d.ts definition file for. The remaining lines are the files that make up the module.

Inside every file that is part of the module, I reference the above file:

/// <reference path="../references/_contacts.ts" />
module Contacts {
    export class Contact { 
        public model: ContactModel;
        // ...
    }
} 

Similarly, you can create a single reference file to list all your modules:

/// <reference path="_address.ts" />
/// <reference path="_contacts.ts" />
/// <reference path="_commerce.ts" />

And simply point to this from your source files.

This does not solve the problem of the emitted code being in separate files, though. For that problem I am using a JavaScript minification tool, which is capable of bundling up multiple files into a single source file. Depending on your compilation settings and use case needs, you may need to apply some wrapper around the generated code for it to work as an AMD module (not too familiar with that part yet).

3
  • As for the last part you can also use this to compile to a single file using this in BeforeBuild: <Exec Command="tsc$(TypeScriptSourceMap) --target ES5 --module AMD --out final.js &quot;C:\YourProject\Scripts_references.ts&quot; @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" /> Compiling the _references.ts file itself ensures correct order of how you laid out the references. I don't think --module flag will just make it work as an AMD module though. I think for that you need to generate a definition file like this: tsc --declarations file1.ts file2.ts file3.ts ...
    – parliament
    Mar 23, 2013 at 8:00
  • Actually, just resolved a bug related to this approach here: typescript.codeplex.com/workitem/836
    – parliament
    Mar 23, 2013 at 19:56
  • @Vazgen Thanks for the heads-up. However, I've switched to the JetBrains WebStorm IDE for TypeScript development, which now has native TS support. It'll auto-compile the files as needed and generally works pretty well (and it doesn't pollute your source folder like VS does). As for bundling, I couldn't find my way around the source when everything was bundled, so have capitulated and now link to the individual js files. I expect to add some Node automation of the bundling once I get closer to a working product. Mar 24, 2013 at 0:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.