1

I found this article its quite interesting, but it does not help me when I try to extend a global variable like window.

Test.ts

window.test = {}; //ERROR: Property 'test' does not exist on type 'Window'.

(function (test)
{
//do stuff
} (window.test)); //Build: Property 'test' does not exist on type 'Window'

Error message:

ERROR: Property 'test' does not exist on type 'Window'.

How can I solve this ?

Community
  • 1
  • 1
ASfdsa33
  • 97
  • 1
  • 9

1 Answers1

1

It's called Declaration Merging:

interface Window {
    test(): void;
}

window.test = function() {
    // do what ever
}

(code in playground)

As you can see you need to declare your new method in the Window interface and then the compiler won't complain when you add the actual implementation.

Nitzan Tomer
  • 155,636
  • 47
  • 315
  • 299
  • does it there's something like `interface` in JS or it's just in typescript ? – Mahmoud Zakal Jul 28 '16 at 08:31
  • @MahmoudZakal `interface` is a typescript thing: http://www.typescriptlang.org/docs/handbook/interfaces.html, as there's no need to such a thing in javascript – Nitzan Tomer Jul 28 '16 at 08:33
  • As of today there's a kinda-sorta need to do this in JS, if you're using the TS compiler to do type checking using the `checkJs` option. In that case, the compiler will complain about `window.test = ...` but is fine with `window["test"] = ...`. – Coderer Jul 28 '17 at 11:29
  • @Coderer Even if you add `test` to the window interface? – Nitzan Tomer Jul 28 '17 at 11:30
  • Maybe I misunderstand but in *vanilla Javascript* there's no such thing as an interface. Mahmoud's question was how to tell the compiler that there should be a `.test` property on `window` *in Javascript*; that's what my comment is about. – Coderer Jul 28 '17 at 11:34
  • @Coderer But, if I understand you correctly, you are using the ts compiler, you just want it to also check regular js files. If you add `test` to the window interface, won't that also affect how the compiler checks the js? – Nitzan Tomer Jul 28 '17 at 11:36
  • When you say "add `test` to the window interface", I think you might mean to create a `.d.ts` file and do the interface definition there (in Typescript, obviously). That's how I'm being told to accomplish more or less the same thing [in my question](https://stackoverflow.com/a/45372322/26286) and it seems like a pretty poor substitute for allowing me to do it in JSDoc or with a similar (comment) annotation. I'm increasingly worried that `checkJs` is not ready for prime time. – Coderer Jul 31 '17 at 07:38
  • @Coderer No, that's not what I mean. It can be added in a `.ts` file, which is the usual use case. In your case you only have `.js` files so you'll need to create a `.d.ts`, but that's a specific case. It sounds to me like your not using typescript right. If you only want static analysis of your js code why not [flow](https://flow.org/)? Also, you know that you can have typescript files (`.ts`) with only js in them? You can keep your entire code, but just change the extension to `.ts` and it will just work. – Nitzan Tomer Jul 31 '17 at 07:53
  • OK, I caved and made a `globals.d.ts` and it does get rid of the warnings. I'm trying to avoid changing extensions so I don't have to re-do my Webpack config, at least in the short term -- this is kind of an experiment, and I might commit to full-on TS eventually :D – Coderer Jul 31 '17 at 07:57
  • Spoke too soon. I put `declare var viewer: MyLib.Viewer;` in `globals.d.ts`, and my red squigglies went away -- but VS thinks `viewer` is of type `any`. I added `import MyLib from "mylib";` to the top of `globals.d.ts` and now the red squiggly came back, as though `globals.d.ts` is no longer being included by the checker. I'd ask a new question about this but I don't think I have the TS vocabulary to word it intelligently. Is it to do with [this](https://github.com/Microsoft/TypeScript/issues/4166)? – Coderer Jul 31 '17 at 08:37
  • @Coderer If you're using modules (export/import) then you'll need to [augment the global module](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation) – Nitzan Tomer Jul 31 '17 at 10:20
  • Thanks! That's exactly what I was missing. – Coderer Jul 31 '17 at 10:56