Typescript - 无法让 'import' 语句发挥作用

Question

使用 typescript ，我试图让“模块”和“导入”等工作，但我遇到了一些困难。我被要求举一个我的问题的例子，所以这里是；

我使用命名空间样式声明来尝试组织项目的各个部分，这就是我最好的工作方式，它帮助我摆脱困扰我的困惑，因此每个 typescript 页面都以命名空间开头，并且然后导出相应的类。

/app_content/scripts/admin/models/Item.ts

module website.admin.models {
   export class Item {
      // properties, etc
   }
}

/app_content/scripts/admin/ui/Component.ts

module website.admin.ui {
   export class Component {
      // properties, etc
   }
}

然后我将尝试在不同的文件中使用其中一个，正如我在许多教程中看到的那样；

/app_content/scripts/admin/views/ItemView.ts

import component = module('website.admin.ui.Component');
import item = module('website.admin.models.Item');

module website.admin.views {
   export class ItemView {
       // try to use stuff, do other stuff, etc.
   }
}

但是，我收到错误模块不能别名为非模块类型。我还没有让任何这些导入工作——更不用说我想要它们了。有什么可以做的吗？

我已经尝试将 Visual Studio 设置为在属性中使用 CommonJS 和 AMD 样式等。

Answer 1

删除模块声明

第一步是删除所有模块声明...

module website.admin.models {

所有这些都可以消失，因为您正在使用外部模块，因此文件 === 模块。文件的全部内容被视为一个模块。外部模块永远不会以任何方式弄脏全局命名空间，这很酷。

导入

如果没有模块声明，你的模块名称是什么？它是模块的路径，所以现在当你导入时，你可以这样做:

import component = require('./app_content/scripts/admin/ui/Component');

重要说明 - 不要添加文件扩展名。

重要的附加说明 - 使用 require 而不是 module(这在 TypeScript 规范中发生了变化)。

完整示例

所以你的代码现在看起来像这样......

/app_content/scripts/admin/models/Item.ts

export class Item {
    // properties, etc
}

/app_content/scripts/admin/ui/Component.ts

export class Component {
    // properties, etc
}

/app_content/scripts/admin/views/ItemView.ts

import Component = require('./app_content/scripts/admin/ui/Component');
import Item = require('./app_content/scripts/admin/models/Item');

export class ItemView {
    example() {
        var component = new Component.Component();
    }
    // try to use stuff, do other stuff, etc.
}

导出其他内容

额外的酷炫功能提醒!一旦你完成了上述工作，试试这个......

如果您不喜欢这种重复...

var component = new Component.Component();

如果 Component.ts 中只有一个类，您可以像这样导出该类来代替模块...

class Component {
    // properties, etc
}

export = Component;

现在你可以使用更漂亮的了:

var component = new Component();

在您的 ItemView.ts 文件中。

运行时

要在网络浏览器中真正开始这一切，您只需包含 require.js并告诉它您的顶级程序文件(例如，通常是 app.ts)。它将加载 app.ts，然后当遇到 require 时，它将加载该模块等等。

<script data-main="/scripts/app" src="/scripts/require.js"></script>

再次省略 data-main 属性中的文件扩展名。