Typescript: add instance of external dependency to window object

Question

I am integrating an external dependency into an Enterprise project. The integration goes like this:

window.foo = new Foo({
      container: `#${iframeContainerId}`,
      plugin: { id: pluginId },
    })

Typescript does not complain about window.foo

as I have this declaration:

declare global {
  interface Window {
    foo: any
  }
}

I get the error Cannot find name 'Foo'

Is there any way of getting Typescript to ignore this? The external dependency is loaded using an external script and I don't think type definitions exist for it.

Answer 1

The solution I went with in the end was

declare global {
  interface Window {
    foo: any
    Foo: any
  }
}

And then for the integration

window.foo = new window.Foo({
      container: `#${iframeContainerId}`,
      plugin: { id: pluginId },
    })

The solution Ovidijus Parsiunas worked but I needed to add a .babelrc file to the project as a result due to errors, so I went with this one.

Answer 2

You can declare your Foo class with a type as follows:

declare class Foo {
  constructor(obj: {
    container: string,
    plugin: { id: string },
  });
  // other methods here
}