如何从 Typescript 模块导出 2 个项目

Question

场景

我的任务是使用 Typescript 创建基于 UI 的 Knockout 组件。

这是我在 vanilla JS 中做过数百次的事情，但我似乎无法让 TS 生成正确格式的 JS 模块以供 Require JS 使用。

理想情况下，我希望 Typescript 生成与用 JS 编写的输出相同的输出，但现在我只想让事情正常运行。

Javascript

这是我试图让 TS 生成的 Javascript，这是来自一个不使用 TS 的不同项目的 Javascript，并且在 JS 处于该项目中时这种格式，一切正常。

define(["knockout", "text!./menubar.html"], function (ko, menubarTemplate)
{
  function menubarViewModel()
  {
    var self = this;
    self.menuBrand = ko.observable("Menu Brand");
    self.menuItems = ko.observableArray([]);

    self.load();
    return self;
  }

  menubarViewModel.prototype.load = function ()
  {
    var self = this;
    $.getJSON("data/menudata.json", function (data)
    {
      self.menuItems(data);
    });
  };

  return { viewModel: menubarViewModel, template: menubarTemplate };
});

在我使用该组件的实际 JS 文件中，我需要做的是：

define(["jquery", "knockout", "bootstrap"], function ($, ko)
{
  ko.components.register("menubar",
  {
    require: "application/components/menubar"
  });

  ko.applyBindings();

});

菜单栏组件的 HTML 只是一个简单的纯 HTML 标记块，在需要将数据注入组件的地方散布着 "data-bind" 属性。

正如我所说，这个 JavaScript 版本完美运行，但我目前工作的客户希望在 Typescript 中使用它，所以我需要解决的第一个挑战是如何 return

  return { viewModel: menubarViewModel, template: menubarTemplate };

来自打字稿模块。

到目前为止打字稿

我取得了一些成功，例如如果我这样做了：

import ko = require("knockout");

module HelloComponent {
  export class HelloViewModel {
    helloText = ko.observable<string>("Hello World");
  }
}

生成一个 JS class，ko 尝试加载，但抱怨它没有模板。

这对我说，如果我可以使用上面的 TS class 并从同一个 class 导出需要的文本 HTML，那么我就可以完成这项工作。

如果我进一步扩展 class 如下：

import ko = require("knockout");
import helloTemplate = require("text!application/components/hello.html");

module HelloComponent {
  export class HelloViewModel {
    helloText = ko.observable<string>("Hello World");
  }

  var tmp = helloTemplate;
}

几天来我一直在尝试解决这个问题，我尝试过的大部分实验要么失败了，要么在 chrome 调试器中显示为运行，但在组件中不产生任何输出。

SO上有几十个帖子，但是none个是针对Knockout组件的，其他都是页面级标准绑定，跟KO组件不一样，跟KO组件是一样的场景我一直在阅读的各种博客文章。

如果有人对如何根据 KnockoutJS 文档中的建议但使用 TS 而不是 JS 实现这一点有见解，那么我很想听听你的想法。

更新 12-08-2015（基于 James 回复）

更改我的组件之一以匹配 'James Brantly' 的答案后，我现在在 Visual Studio 中看到以下内容：

更新 13-08-2015（Post 测试 James 回复）

即使出现上面显示的错误，我现在已经将几个组件放在一起，所有组件都使用相同的方法，并且一切正常。

Visual studio 仍然将这些文件标记为有错误，但它仍然允许我编译项目，并且 Typescript 仍然执行它需要的并编译为 JavaScript.

至此，我将问题标记为已回答，因为最初的问题已经解决。

Answer 1

在代码中：

import ko = require("knockout");

module HelloComponent {

您正在混合使用 internal modules（现在称为名称空间的模块关键字）和 基于文件的模块（import 关键字）。

不要

仅使用外部模块：

import ko = require("knockout");

export class HelloViewModel {
  helloText = ko.observable<string>("Hello World");
}

更多：https://www.youtube.com/watch?v=KDrWLMUY0R0&hd=1

Answer 2

我认为您问题的关键在于您希望模块 return 类似于 { viewModel: menubarViewModel, template: menubarTemplate };。你这样做：

import menubarTemplate = require('text!./menubar.html');

class MenubarViewModel{

}

export = {
    viewModel: MenubarViewModel,
    template: menubarTemplate 
}

如何从 Typescript 模块导出 2 个项目

How can I export 2 items from a Typescript Module

html

javascript

web-component

knockout.js

typescript

场景

Javascript

到目前为止打字稿

更新 12-08-2015（基于 James 回复）

更新 13-08-2015（Post 测试 James 回复）