4

I've got a create-react-app React project that I'm (very slowly) starting to move over to Typescript. In my various init files (all of which are currently Javascript files), I've declared some global app variables on the window object--basically window.MyApp. I get that perhaps I should switch over to Context for these variables, but that's not an option right now.

What I'd like to do is to be able to reference variables on the window.MyApp scope from within a Typescript file. So, something like:

const myVar = `${window.MyApp.appBasePath}path/to/something/`

However, Typescript throws up this error:

Property 'MyApp' does too exist on type 'Window'

So...is there an easy fix to this? Or does this mean I need to convert all my init files where window.MyApp is declared over to Typescript, and do something like:

interface Window {
    MyApp: any
}

I'm hoping to avoid that level of re-write at this point, as I'm still at the "toe in the water" phase of Typescript integration.

Any guidance is appreciated!

hairbo
  • 3,113
  • 2
  • 27
  • 34
  • You just have to `declare` the window once properly. – Jonas Wilms Apr 03 '19 at 20:36
  • You are correct that Typescript will complain about `window.MyApp` if you never declare that `MyApp` exists. You can also do that in a `.d.ts` declaration file. By the way, declaring it as `any` defeats the whole purpose of using Typescript – Kokodoko Apr 03 '19 at 20:36
  • Okay, so given that I'm really a Typescript newbie, and I'm already defining `window.MyApp` in an existing JS file, literally where and how would I declare this? I tried creating a file called `index.d.ts`, then put a simple `declare global`, but it barked at me: "augmentations for the global scope can only be directly nested yadda yadda yadda". Googling around doesn't reveal any really simple examples to copy. Sorry for being a pain--I'm just hoping this is a quick fix, but maybe it's not. – hairbo Apr 03 '19 at 21:02
  • 1
    ...and I think I just answered my own question. At the top of the `tsx` file where I want to refer to `window.MyApp`, I added: `declare global { interface Window { MyApp: any; } }`, and now it appears to work. I assume that once I really figure this out, I won't have to do that in every file, as you say @JonasWilms, but this is a good quick hack to get me moving. – hairbo Apr 03 '19 at 21:17
  • To be honest Ive never done that (because I don't use the `window` object anymore, bot rather bundle my dependencies), but `declare`s should work globally – Jonas Wilms Apr 03 '19 at 21:19
  • I'm going to catalog my progress here, just in case it's useful to others. I created a `config.d.ts` file, and put this in it: `declare global { interface Window { MyApp: any; } }`, but I got `TypeScript error: Property 'MyApp' does not exist on type 'Window'.` in the files that reference that scope. Digging around, I found that I had to add an `export {}` line to `config.d.ts`, which I *guess* makes sense (given that I included `config.d.ts` in my main `index.js` file. But clearly, there are things here I don't understand yet. – hairbo Apr 04 '19 at 14:24

0 Answers0