declaring var results in undefined error

Question

I'm a typescript newbie, I'm picking up an existing durandal project to make some changes. I've noticed that this code snippet gives a runtime error.

declare var routeLinks: IRouteLinks;
routeLinks = new RouteLinks();
export = routeLinks;

Error = Failed to load root module (ui/shell). Details: routeLinks is not defined(…)

When I change the code to remove the declare keyword (below) however, the issue goes away and the code seems to work as intended.

var routeLinks: IRouteLinks;
routeLinks = new RouteLinks();
export = routeLinks;

This pattern is replicated in a number of places, each time I get a runtime exception I go in and remove the declare keyword and it fixes the issue.

• Can anyone explain why including the declare keyword is causing this issue, and why removing it fixes it?
• What was the possible intention of using the declare in this context the first place (in newbie terms if possible)?
• And if this code was previously working, how come on my box it fails? (breaking changes between typescript or durandal versions maybe?)

Thanks.

Further Info

Looking in to this further, when I compare the compiled js i see this line is missing when we use the declare keyword

 var routeLinks;

So the error now makes more sense to me, but why does using declare cause the cross-compiler to drop the variable declaration, this seems counter-intuitive.

Rocky

This is a runtime error right? Not a compilation one? – Ollie

Yes, a runtime error. – Rocky

declare means that the variable routeLinks is already defined somewhere else and that it should be loaded in the environment before loading this code snippet. When you remove the declare it actually outputs the variable declaration to the compiled js. I'm not sure how you load things so it's hard to answer more specifically. – Ollie

That is exactly the kind of answer I need, so y'know, pop it in an answer and claim some awesome points! – Rocky

Answer 1

The idea about behind the declare keyword is to tell the compiler that a variable (or class, function, etc) will be present at runtime when the code loads into the environment.
This is helpful when using libraries that don't have declaration files for example.

For example, the following code:

declare var VERSION: string;
console.log(`loaded version: ${VERSION}`);

Compiles to:

console.log("loaded version: " + VERSION);

While this:

var VERSION: string;
console.log(`loaded version: ${VERSION}`);

Compiles into:

var VERSION;
console.log("loaded version: " + VERSION);

When the declare keyword is used then the compiler will just ignore it and won't output it to the generated js.

In your case the variable is probably isn't defined at runtime, which is why you don't get an error when removing the declare.

You can read more about it here: Quick Tip – TypeScript Declare Keyword

Ollie