Call a global variable inside module

Question

I have a typescript file called Projects.ts that I want to reference a global variable declared in a bootstrap plugin called bootbox.js.

I want to access a variable called bootbox from within a TypeScript classes.

Is it possible?

Answer 1

You need to tell the compiler it has been declared:

declare var bootbox: any;

If you have better type information you can add that too, in place of any.

Answer 2

For those who didn't know already, you would have to put the declare statement outside your class just like this:

declare var Chart: any;

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.scss']
})

export class MyComponent {
    //you can use Chart now and compiler wont complain
    private color = Chart.color;
}

In TypeScript the declare keyword is used where you want to define a variable that may not have originated from a TypeScript file.

It is like you tell the compiler that, I know this variable will have a value at runtime, so don't throw a compilation error.

Answer 3

If it is something that you reference but never mutate, then use const:

declare const bootbox;

Answer 4

Sohnee solutions is cleaner, but you can also try

window["bootbox"]

Answer 5

If You want to have a reference to this variable across the whole project, create somewhere d.ts file, e.g. globals.d.ts. Fill it with your global variables declarations, e.g.:

declare const BootBox: 'boot' | 'box';

Now you can reference it anywhere across the project, just like that:

const bootbox = BootBox;

Here's an example.

Answer 6

// global.d.ts
declare global {
  namespace NodeJS {
    interface Global {
      bootbox: string; // Specify ur type here,use `string` for brief
    }
  }
}

// somewhere else
const bootbox = global.bootbox
// somewhere else
global.bootbox = 'boom'

Answer 7

Download the bootbox typings

Then add a reference to it inside your .ts file.