如何在多个 AMD 文件中传播模块? [英] How to spread module across multiple AMD files?

问题描述

我不知道是否有可能将导出模块"分布在多个文件中.

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

如果我有文件 Contact.ts:

If I have file Contact.ts:

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

和另一个 ContactView.ts

and another ContactView.ts

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

然后 TSC 无法识别 Contact 类.如您所见，Contact 和 ContactView 被声明为驻留在同一个模块中，并且根据规范它应该可以工作.

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.

我正在构建一个使用 require.js 和 AMD 模式的复合应用程序，因此我必须使用导出模块"声明.

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" ?

谢谢你的建议.

目前我通过导入分别加载每个模块，但是，如果您注意到，它会造成大量代码浪费和大量导入"依赖项.我的问题是是否有办法使用相同的命名空间(即联系人)来让我知道我不想导入的 TS.我正在研究正常的//命令，但它不起作用.到目前为止，我什至尝试了 *.d.ts 声明文件，但没有成功.

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.

推荐答案

该规范允许您跨多个文件定义内部模块(本质上，内部模块指的是 javascript 模块模式).外部模块，例如 AMD 或 CommonJS 模块，工作的想法是每个文件都是实际的代码模块"，并且其中的命名空间/命名无关紧要，因为模块将被加载到其无论如何都要拥有新对象.

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.

您可以编写以下代码来加载 ContactView.ts 模块内的 Contact.ts 模块:

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
   }
}

这应该工作得很好，但是如果您想访问另一个区域中两个模块的内容(例如，自己制作一个新的 Contact 模型)，您实际上必须同时导入它们:

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.

另一种选择是将Contact"与ContactView"一起导出，如下(当然这段代码有点傻，因为你已经通过 ContactView 的模型属性做到了这一点，但永远不会更少......):

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;
}

因此您可以在加载 ContactView 后访问它.

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

顺便说一句，您不仅限于通过导出模块名称{...}"导出模块，您可以导出任何内容，因为文件本身就是模块.所以你可以有一个只有导出函数 foo() { ... }"的文件，而没有任何模块模式代码包装它.

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.

看起来 AMD 可能具有加载多个依赖项并从中构建模块"的功能，但我不知道这在 TS 中如何工作，这里有一个链接:http://www.adobe.com/devnet/html5/articles/javascript-architecture-requirejs-dependency-management.html(构造函数模块).

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).

这篇关于如何在多个 AMD 文件中传播模块?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！