Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Ok, so let me begin by saying that "Module" can mean different things. For example, there is the "module pattern" which is what your "MyModule" creates. As far as I gather, TypeScript refers to these as "Internal Modules" in the language spec, and these differ from "External Modules" that you would be loading with something like RequireJS. The main distinction is that external modules expect to have their own isolated environment with a predefined 'exports' object they can use for exporting their functionality.</p> <p>Take a look at the output of your module:</p> <pre><code>var MyModule; (function (MyModule) { var MyClass = (function () { function MyClass() { } return MyClass; })(); MyModule.MyClass = MyClass; })(MyModule || (MyModule = {})); </code></pre> <p>You see that it is exporting things into "MyModule" which will be made globally available to other script files you load with, for example, an html "script" block. Being that you mentioned you have 60 of these, you could probably also set the compiler to output a single file that you could include in markup, instead of loading each file one by one.</p> <p>Moving on, take a look at what happens to the output if you change your module declaration from "module MyModule { ... }" to "export module MyModule { ... }":</p> <pre><code>(function (MyModule) { var MyClass = (function () { function MyClass() { } return MyClass; })(); MyModule.MyClass = MyClass; })(exports.MyModule || (exports.MyModule = {})); </code></pre> <p>As you see, your module is still using the "module pattern" but it is being assigned to as a member of "exports", signifying that it is meant to be loaded with, for example, node's "require" function.</p> <p>In this case, you would want to actually use your module with this code:</p> <pre><code>import wrapper = module("./MyModule"); var instance = new wrapper.MyModule.MyClass(); </code></pre> <p>Note the "./MyModule" name actually refers to the <strong>filename</strong> (minus the .js extension) the module is defined in (this is why VS was saying it couldn't find those modules for you). The code should compile to something like: </p> <pre><code>var wrapper = require("./MyModule"); var instance = new wrapper.MyModule.MyClass(); </code></pre> <p>To add to this, you no longer even really need to do anything with the "module" keyword to have a module. You could simply export a function:</p> <pre><code>// foo.ts export function foo() { ... }; // some other file in the same dir import wrapper = module("./foo"); var result = wrapper.foo(); </code></pre> <p>This works because the function 'foo' will be directly assigned to "exports" which will be aliased to "wrapper" in the other file.</p> <p>To add further onto this confusing mess of module related things, I should also mention that AMD modules are different still because they are loaded asynchronously, unlike node's "require". To get TypeScript to output those you'll need to pass in a "--module AMD" parameter to the compiler.</p> <p>Anyway, I hope I explained the situation well enough to the point you'll be able to figure out what exactly you need/want. The type of modules you end up using will really depend on how you'll be using them... i.e., node, web, or some mix of both.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. COThank you, this was very helpful. I ended up doing without external modules after all: I compile the library into one big .js file and the application into another and simply load them via script-tags. In the application's source files, I use reference comments to the library's .d.ts file to make its classes available.
      singulars
    2. COare there any way to load two files into one wrapper? I define viewmodels ans export as classes in my typescript files. Then when imported i always end up doing import wrapper1 = module("file1"), import wrapper2 = module("file2"); and then new wrapper1.Viewmodel1() and new wrapper2.ViewModel2(). Would be nice if everyhing could just be under one module, viewmodels.Viewmodel1 and viewmodel.Viewmodel2. To get this i need to expose all view moedl classes in the same file, which limits the overview.
      singulars
    3. CO@s093294 Been months since I looked at typescript, so keep that in mind. Anyway, use `///<reference path="file2.ts" />` at the top of `file1.ts` and compile with `tsc --out file.js file1.ts`. The compiler will automatically pick up that `file1.ts` requires `file2.ts` (thanks to the reference) and compile it into a single javascript file. While not exactly the perfect demo for you, take a look at: https://github.com/nxn/ModuleDemo -- specifically `make.bat`, the 'Address' and 'Contacts' modules (implemented across multiple files), and `default.htm`, which loads the compiled javascript files.
      singulars
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload