In TypeScript, why do you sometimes need to use declare for declaring a variable, and sometimes you don't (the same question is true for functions, …)?

To give an example: When (and why) do I use

declare var foo: number;

if

let foo: number;

would do the same (at least it seems to me as if it did the same, i.e. they both declare a variable called foo of type number). What's the difference?

In TypeScript, why do you sometimes need to use declare for declaring a variable, and sometimes you don't (the same question is true for functions, …)?

To give an example: When (and why) do I use

declare var foo: number;

if

let foo: number;

would do the same (at least it seems to me as if it did the same, i.e. they both declare a variable called foo of type number). What's the difference?

• javascript
• typescript

• Possible duplicate of What's the difference between "declare class" and "interface" in TypeScript – mixel Commented Aug 5, 2019 at 5:48

3 Answers 3

You never use declare to declare a variable. You just use it to let TypeScript know that the variable exists, even though it's not declared in the code (for instance, because it's a global declared in other code, or because you're going to combine the JavaScript output of tsc with another file that declares the variable). Or put it another way: It only declares it for the TypeScript compiler, not for the JavaScript runtime.

If you use the playground to compile your declare var foo: number;, it literally outputs nothing for that declaration; example.

In contrast, let foo: number; (or var foo: number;) is a variable declaration; example.

In TypeScript, "declare var foo: number;" means: "In the code there is a number called foo. I know that you would not retrieve it. But please trust me and act just like you know it." It is a kind of forward declaration just like you can see it in C/C++.

Example:

Assume that you are writing a TS script using jQuery. You would include all the JavaScript like this somewhere in your HTML page:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="myscript.js"></script> <!-- generated from TypeScript, with something like "tsc myscript.ts" -->

As a consequence, there is no need to include jQuery in your TS script, since JS generated from your TS script will know everything about jQuery's stuff. However, the TS transpiler will remark jQuery's iconic "$()" a bunch of time in your code. You do not include jQuery in your TS code (because there is no need to) so it does not know anything about "$()". It will consequently report to you lots of errors asking you what the hell is this "$" it sees everywhere in the code. To solve all those $-related errors, you will write "declare var $: jQuery;" at the beginning of your TS script. By writing this, you tell this to the TS transpiler:

In the code there is a variable called "$" whose type is "jQuery". I know that you would not have retrieved it. But assume that it exists and please act like there was a "import "aTSfile.ts";" which perfectly describes it to you (a description just like I use it) earlier in the code. Trust me, JavaScript will know what that "$" REALLY is when the script is executed. Do not worry about that. ;-)

The declare keyword in typescript is useful for telling the typescript compiler that a declaration is defined somewhere else, Hope this link helps: http://blogs.microsoft.co.il/gilf/2013/07/22/quick-tip-typescript-declare-keyword/