Calling JavaScript function inside a JavaScript module from TypeScript v2.2.1

Question

I've a JavaScript module in this way

myJSModule.js

var myJSModule = function () {
   var _public_ = {};

   _public_.foo = function () {
   }

   return _public_;
}();

Now I need to call it in a function in TypeScript

myTypeScript.ts

namespace Custom {

    export function foo111() {
        myJSModule.foo(); // error: "Symbol myModule can't be properly resolved"
    }
}

What's the correct way to call foo in myJSModule?

@binariedMe OP may not have control over that file (e.g. loaded from CDN). @vcRobe try window.myJSModule. — Jared Smith
– Jared Smith, Commented Mar 23, 2017 at 19:17
@JaredSmith thank you for your quick answer. I still get the same error "Symbol window.myJSModule can't be poperly resolved" — vcRobe
– vcRobe, Commented Mar 23, 2017 at 19:21
@vcRobe you will need to define an appropriate interface to access the global window object ourcodeworld.com/articles/read/337/… — Jared Smith
– Jared Smith, Commented Mar 23, 2017 at 19:23
Thank you @JaredSmith for your help. I posted an answer based on the article you suggested so anyone else having the same problem can fix it quickly. — vcRobe
– vcRobe, Commented Mar 23, 2017 at 19:47

Seamus · Accepted Answer · 2017-03-23 20:23:51Z

2

The best way is to use an ambient declaration. You can make the ambient declaration in your TypeScript file, but it is often easier to manage if you place them in separate .d.ts files.

In your case you might add a file called myJSModule.d.ts:

declare var myJSModule: {
    foo(): void;
}

This will tell the compiler that myJSModule exists, and has the described type.

answered Mar 23, 2017 at 20:23

Seamus

4,8392 gold badges37 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

vcRobe · Accepted Answer · 2017-03-23 19:44:56Z

1

Here's one possible solution thanks to the comment of @Jared Smith

I can cast the window object to any so I don't need to declare an interface.

myTypeScript.ts

namespace Custom {
    export function foo111() {
        (<any>window).myJSModule.foo();
    }
}

For more information read the article http://ourcodeworld.com/articles/read/337/how-to-declare-a-new-property-on-the-window-object-with-typescript

answered Mar 23, 2017 at 19:44

vcRobe

1,8014 gold badges20 silver badges37 bronze badges

3 Comments

Madara's Ghost Over a year ago

<any>window is the legacy way of casting, prefer window as any instead.

vcRobe Over a year ago

Would you please tell me why windows as any is the preferred way?

Madara's Ghost Over a year ago

Mostly, because in JSX context it's impossible for the parser to know what you mean when you have something like this: var foo = <string>bar (Is it a cast, or opening a JSX element?)

cnexans · Accepted Answer · 2017-03-23 20:11:04Z

0

You can just declare the module

declare const myJSModule : any;
namespace Custom {
    export function foo111() {
        myJSModule.foo();
    }
}

If you have a definition file of the JS module you can also add it to your ts configuration.

answered Mar 23, 2017 at 20:11

cnexans

9841 gold badge7 silver badges21 bronze badges

Collectives™ on Stack Overflow

Calling JavaScript function inside a JavaScript module from TypeScript v2.2.1

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related