Typescript - 无法使'import'语句生效

Question

使用打字稿，我试图让'模块'和'导入'等工作，并且我有一点时间。我被要求做一个我的问题的例子，所以在这里;

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

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

但是，我收到错误Module cannot be aliased to a non-module type。我还没有让这些imports中的任何一个工作 - 更不用说我想要它们了。有什么可以做的吗？

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

Answer 1

删除模块声明

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

module website.admin.models {

所有这些都可以，因为您正在使用外部模块，所以a file === a module。文件的全部内容被视为模块。外部模块从不以任何方式弄脏全局命名空间，这很酷。

导入

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

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属性中的文件扩展名。