285

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?

3

7 Answers 7

458

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.

7
  • 7
    Can skip ': any' bit actually. Nov 7, 2012 at 13:49
  • 39
    That wouldn't make a good example for a Q&A format though as I am suggesting they do add specific type information and the answer shows how and where they would put it.
    – Fenton
    Nov 7, 2012 at 13:53
  • 20
    For us typescript newbies, where do we put that declare statement?
    – Bob Horn
    Nov 9, 2016 at 19:34
  • Is this a good solution for global functions too? Placing something like declare var myFunction: any;?
    – jonathanrz
    Mar 13, 2018 at 0:26
  • 1
    @jonathanrz yes, it can be a specific signature too if you want to go that far, for example declare var myFunction: (input: string) => void;
    – Fenton
    Mar 14, 2018 at 11:20
59

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.

0
20

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

declare const bootbox;
15

Sohnee solutions is cleaner, but you can also try

window["bootbox"]
12

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.

1
  • Your linked StackBlitz gives Error: BootBox is not defined Dec 15, 2022 at 20:42
3
// 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'
-3

Download the bootbox typings

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

2
  • 3
    Please don't just post some tool or library as an answer. At least demonstrate how it solves the problem in the answer itself.
    – Filnor
    Mar 21, 2018 at 14:50
  • 1
    Wow, this is definitely the correct answer. Unbelievable to see it down here at the bottom in the negative points. Unlike the other answers manually declaring bootbox as any, this will correctly type the bootbox global so that properties on it are understood correctly by TypeScript. And this is true generally for other libraries. You can often find the type definition and import it. That is the proper way to do it. May 21, 2022 at 2:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.