A Boschman A Boschman - 4 days ago 5
TypeScript Question

TypeScript definition for single JavaScript file

I'm trying to run an

Ionic2
app inside a
Movilizer
HTML5 view. In order to send data between the Movilizer container client and the Ionic2 app, I need to include a
plugins/Movilizer.js
file. As I understand it, the Movilizer system will then replace that file with one that contains the actual implementation. The contents of the file are as follows:

//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();


In order to be able to use the Movilizer interface in my TypeScript files, I believe I need to make a Movilizer.d.ts definition file. However, I'm having trouble with this. I tried the following:

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


I have also tried referencing the
.d.ts
file in my
tsconfig.json
file. Adding this changed nothing:

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


I tried to use the file in my FooPage as follows. This does compile:

//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!');
});
}

}


I'm testing the app like this:

$ ionic serve


This immediately crashes with the following error message:

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


My Question

How do I use the Movilizer.js file in my TypeScript files? If I need a
.d.ts
file, how do I create it?

Answer

I notice there is no export in the code of Movilizer.js. So, it is not a module. Then, you can't import it.

You could load it in the browser, not as a module but as a script (for example, not in Webpack, but with a markup <script>). Then it will exist as a global variable. In TypeScript, we can expect that the file Movilizer/index.d.ts declares the global variable. Therefore, you can just use it.

Related:

Comments