4

Assuming I have an external javascript inserted in the page and it exports a few things to the external scope (ie binds them to window).

I want to call some of those properties in my typescript projects as:

UndeclaredExportedProperty.aFunction()

But typescript will not allow me to compile that ><

I don't want to go through a convoluted way of declaring the whole interface of the module since I don't know it and quite frankly I don't care about it. Its just a module that I have to call once and "trust" that by the time I make the call its loaded and contains the correct elements (its non critical so not calling it will not make the world catch fire).

What is the easiest way of doing this with typescript ?

Edit in response to mark as duplicate:

Whilst the answer to that question did solve my problem the question is different (for example stack isn't able to find it as a duplicate suggestion) and I feel like for what I'm trying to do Pokus answer is a more straight forward and general solutions than the answers in that question

That being said, if an admin feels like this is still a duplicate or to simple of a question feel free to delete/close since I've gotten my answer. Personally I will leave it standing because the next person searching via google or so might find an answer more easily this way.

George
  • 3,521
  • 4
  • 30
  • 75
  • Possible duplicate of [How do you explicitly set a new property on \`window\` in TypeScript?](http://stackoverflow.com/questions/12709074/how-do-you-explicitly-set-a-new-property-on-window-in-typescript) – Simon Groenewolt May 21 '17 at 20:18
  • 1
    @ Simon Groenewolt Whilst the answer to that question did solve my problem the question is different (for example stack isn't able to find it as a duplicate suggestion) and I feel like for what I'm trying to do Pokus answer is a more straight forward and general solutions than the answers in that question – George May 21 '17 at 20:22
  • Possible duplicate of [typescript: What to do if a typings (or tsd) is not available?](http://stackoverflow.com/questions/36834121/typescript-what-to-do-if-a-typings-or-tsd-is-not-available) – Alex May 21 '17 at 20:34
  • @George check, retracted my close vote :-) – Simon Groenewolt May 22 '17 at 10:28

3 Answers3

6

You should use the declare keyword for that:

declare var UndeclaredExportedProperty: any;

The official docs states this here: https://www.typescriptlang.org/docs/handbook/modules.html in the section Working with Other JavaScript Libraries

Poku
  • 3,138
  • 10
  • 46
  • 64
  • Oh, this also seems to work and is a bit more intuitive than the answer I found, so I guess I'll mark this as correct. Thanks a bunch :) – George May 21 '17 at 20:18
  • Cool, please mark as correct answer if you found it helpfull :) – Poku May 21 '17 at 20:22
2

Try 

(window as any).UndeclaredExportedProperty.aFunction()

this will tell the compiler to temporarily treat the Window instance as untyped and allow you to do anything with it.

Andrew Eisenberg
  • 28,387
  • 9
  • 92
  • 148
0

Ok, this question was apparently answered here:

How do you explicitly set a new property on `window` in TypeScript?

I can't mark my own post as a duplicate so I will just leave this here and close the thread, maybe the next poor sod to google search and not click that link will stumble upon this.

Apparently properties of an object (e.g window) can be queried with the array selection operator (o.o?) so you can just do:

window["UndeclaredExportedProperty"].aFunction()
Community
  • 1
  • 1
George
  • 3,521
  • 4
  • 30
  • 75
  • According to the official typescript documention you should use the declare keyword: https://www.typescriptlang.org/docs/handbook/modules.html section Working with Other JavaScript Libraries. See my answer for code ex. – Poku May 21 '17 at 20:20