Как я могу экспортировать 2 элементы из модуля Машинописи

Question

Сценария

Я поставлена ​​задачей создания пользовательского интерфейса на основе Нокаут компонентов с использованием машинописи.

Это то, что я делал сотни раз в ванильном JS, но я просто не могу заставить TS генерировать JS-модуль в правильном формате, который должен потребляться Require JS.

В идеале, я бы хотел, чтобы для Windowcript генерировался идентичный вывод, написанный в JS, но сейчас я просто хочу, чтобы все работало.

Javascript

Это Javascript, что я пытаюсь получить TS для генерации, это Javascript из другого проекта, который не использует TS, и в этом проекте, когда 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 для компонента MenuBar является лишь простой кусок простой HTML-разметки посыпали «данных- привязать "атрибуты, где это необходимо для ввода данных в компонент.

Как я уже говорил, эта версия JavaScript прекрасно работает, но клиент я работаю в данный момент хочет, чтобы это в машинописном, так что первый вызов, который я должен решить, как вернуть

return { viewModel: menubarViewModel, template: menubarTemplate }; 

из машинописный модуль.

Машинопись до сих пор

Iv'e было небольшое количество успеха, например, если я делаю:

import ko = require("knockout"); 

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

Это создает класс JS, который ко пытается загрузить, но жалуется, что его не имеет шаблона.

Это говорит мне, что если я могу взять класс TS выше и экспортировать требуемый текст HTML из того же класса, то я мог бы просто сделать эту работу.

Если я еще больше расширить этот класс следующим образом:

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

Я пытался решить эту проблему в течение нескольких дней в настоящее время, и большинство из экспериментов я попытался было либо не удалось, или появляется для запуска в хром-отладчике, но не производит вывода в компоненте.

Здесь есть десятки сообщений, но ни одна из них не применима к компонентам нокаута, все остальные относятся к стандартному привязке уровня страницы, который отличается от компонентов KO, это тот же сценарий с различными сообщениями в блоге, я читал.

Если у кого-то есть представление о том, как реализовать это в соответствии с рекомендациями в документах KnockoutJS, но с использованием TS, а не JS, то мне бы хотелось услышать ваши идеи.

Update 12-08-2015 (на основе Джеймс Ответить)

После замены одного из моих компонентов, чтобы соответствовать 'Джеймс Brantly' s ответ, теперь я вижу следующее в Visual Studio:

Update 13-08-2015 (Post тестирование Джеймс Ответить)

Даже с ошибками, показанных выше, я ставлю вместе несколько компонентов, все с использованием той же методологии, и все работает отлично.

Visual studio по-прежнему помещает эти файлы как имеющие ошибки, но по-прежнему позволяет мне скомпилировать проект, а TypScript все еще выполняет то, что ему нужно, и компилируется на JavaScript.

В этот момент я отмечаю вопрос как ответ, так как начальный вопрос был решен.

Answer 1

Я думаю, что ключ к вашему вопросу является то, что вы хотите, чтобы модуль вернуть что-то вроде { viewModel: menubarViewModel, template: menubarTemplate }; , Вы делаете это так:

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

class MenubarViewModel{ 

} 

export = { 
    viewModel: MenubarViewModel, 
    template: menubarTemplate 
} 

Answer 2

В коде:

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