2016-11-30 5 views
1

Я пытаюсь запустить приложение Ionic2 в виде Movilizer HTML5. Чтобы отправить данные между клиентом контейнера Movilizer и приложением Ionic2, мне нужно включить файл plugins/Movilizer.js. Насколько я понимаю, система Movilizer заменит этот файл тем, который содержит фактическую реализацию. Содержимое файла следующим образом:Определение типаScript для одного файла JavaScript

//File at: src/plugins/Movilizer.js 
var Movilizer = function() {}; 

Movilizer.prototype.readGlobalVariable = function(varName, successCB, errorCB) 
{ 
    result = "Hello World"; 
    successCB(result); 
} 

var movilizer = new Movilizer(); 

Для того, чтобы иметь возможность использовать интерфейс Movilizer в моей машинописи файлах, я полагаю, что нужно сделать файл определения Movilizer.d.ts. Однако у меня проблемы с этим. Я попытался следующие:

//File at: src/plugins/Movilizer/index.d.ts 
//Also tried it at: src/plugins/Movilizer.d.ts 
export = Movilizer; 

declare class Movilizer { 
    constructor(); 

    readGlobalVariable(key: string, onSuccess: (value: string) => void, onError:() => void): void; 
} 

Я также попытался ссылки на файл .d.ts в моем tsconfig.json файле. Добавление этого ничего не изменило:

//File at: tsconfig.json 
(...) 
"files": [ 
    "src/plugins/Movilizer/index.d.ts" 
], 
(...) 

Я попытался использовать файл в своем FooPage следующим образом. Это делает компиляции:

//File at: src/pages/foo/foo.ts 
import {Component} from '@angular/core'; 
import {NavController} from 'ionic-angular'; 
import Movilizer from '../../plugins/Movilizer'; 

@Component({ 
    selector: 'page-foo', 
    templateUrl: 'foo.html' 
}) 
export class FooPage { 

    constructor(public navCtrl: NavController) { 
     new Movilizer().readGlobalVariable("myGlobalVariable", (result) => { 
      console.log('readGlobalVariable Success: ' + result); 
     },() => { 
      console.log('readGlobalVariable Failure!'); 
     }); 
    } 

} 

Я тестирую приложение, как это:

$ ionic serve 

Это сразу же происходит сбой со следующим сообщением об ошибке:

EXCEPTION: Error in ./FooPage class FooPage_Host - inline template:0:0 caused by: __WEBPACK_IMPORTED_MODULE_2__plugins_Movilizer___default.a is not a constructor 
ErrorHandler.prototype.handleError 
_callAndReportToErrorHandler/< 
sg</d</t.prototype.invoke 
NgZone.prototype.forkInnerZoneWithAngularBehavior/this.inner<.onInvoke 
sg</d</t.prototype.invoke 
sg</v</e.prototype.run 
h/< 
sg</d</t.prototype.invokeTask 
NgZone.prototype.forkInnerZoneWithAngularBehavior/this.inner<.onInvokeTask 
sg</d</t.prototype.invokeTask 
sg</v</e.prototype.runTask 
i 
mh/</u 
mh/< 
Vl/r 

Мой вопрос
Как использовать файл Movilizer.js в моих файлах TypeScript? Если мне нужен файл .d.ts, как его создать?

ответ

1

Я замечаю, что нет export в коде Movilizer.js. Таким образом, это не модуль. Тогда вы не можете import.

Вы можете загрузить его в браузере, а не как модульно как сценарий (например, не в Webpack, но с разметкой <script>). Тогда он будет существовать как глобальная переменная. В TypeScript мы можем ожидать, что файл Movilizer/index.d.ts объявит глобальную переменную. Поэтому вы можете просто использовать его.

Связанные:

  • Here are the differences между modules и scripts;
  • Возможно, можно добавить Movilizer.js в комплект Webpack с чем-то вроде expose loader?
+0

@ABoschman Какая версия веб-пакета? – Paleo

+0

@ABoschman: В коде 'Movilizer.js' я не вижу никакого« экспорта ». Есть ли «экспорт» где-нибудь в этом файле? – Paleo

+1

@ABoschman: Если в 'Movilizer' нет' export', вы не должны «импортировать» его. Вы можете загрузить его в браузере не как модуль, а как «скрипт» (например, не в Webpack, а с разметкой «