Reputation: 63840
I'm converting an existing JavaScript application to Typescript. I start with:
// file1.js
(function(ns) {
ns.bar = function() { };
}(window.MyNamespace || {}));
// file2.js
(function(ns) {
ns.Item = function() {
this.doStuff = function() { ns.bar(); };
}
}(window.MyNamespace || {}));
Now I'm converting file2.js
to TypeScript:
module MyNamespace {
class Item {
doStuff() {
MyNamespace.bar(); // This is obviously a problem
}
}
}
There is a problem with calling bar
. I understand that converting file1.js
to TypeScript will make things a lot easier, but that file is quite large in reality so I want to do the conversion next sprint and get a intermediary situation.
How do I solve that? How do I tell tsc that bar
is a function on the module itself?
I've tried declare var bar: () => void;
inside the module
and variations thereof, but didn't get it to work so far.
I know I could consider converting those "namespace-functions" to static methods on a class, but that would require rewriting file1.js
now, which I don't want (yet).
I've got a workaround like this:
module MyNamespace {
var ns: any = MyNamespace;
class Item {
doStuff() {
ns.bar();
}
}
}
But that feels a bit off, not in the least because it requires changes inside my class
, whereas I'd prefer to have a bridge between file2.ts
and file1.ts
seperate from the final file2.ts
stuff.
In essence, I feel like I'm writing a .d.ts
file for my original file1.js
functionality that will make file2.ts
work now, in a way that can remain unchanged after converting file1.js
to .ts
.
Any tips? How do I create a typing for my unconverted file1.js
?
Upvotes: 0
Views: 52
Reputation: 5115
Add a declare statement next to the module like this:
declare module MyNamespace {
var bar: () => void;
}
module MyNamespace {
class Item {
doStuff() {
MyNamespace.bar(); // This will compile!
}
}
}
You could (should) remove this temporary declaration of the bar
method once you've converted file1.js to Typescript
Upvotes: 1