I have been developing in JavaScript a long time ago. Lately I was asked to do some work with client side scripting so I decided to look into TypeScript, to avoid some of JavaScript pitfalls. My problem is probably basic but I could not find an answer that would be clear to me with my lack of TypeScript / new JavaScript development over the last 10 years. Here it is - I have three files -

1. index.html
2. Globals.ts
3. Drawings.ts

Index.html is the file to be served, in it a JavaScript will arrange and interact with the user. Globals.ts - simply contain my global variables / constants Drawing.ts - contain the Drawing functions for the data, it is referencing globals.ts for the global definitions, with this statement /// <reference path="globals.ts"/>.

In index.html I use the SCRIPT tag with src='Drawings.ts' right under the HEAD Tag.

<SCRIPT lang='JavaScript' src='Drawing.ts'></SCRIPT>
<SCRIPT lang='JavaScript'>local code goes here</SCRIPT>

All the globals in the Global.ts are declared with the word var and assigned a value, like this -

    var x_scale_h_offset = 15;
    var y_scale_v_offset  = 15;
    var g_general_margin  = 10;
    var g_std_font_height  = 10;
    var dpi = 1;

After checking for document complete status I call the init_d() function from Drawings.ts which looks like this -

function init_d()
{
    dpi = window.devicePixelRatio;
}

I get a runtime Uncaught exception dpi is not defined.

I was under the impression that variables declared in a file which are not part of an object are global to all scripts. I also assume - which I might be wrong - that this reference statement /// <reference path="globals.ts"/> will cause Globals.ts to be loaded.

Can someone explain - in simplicity - what am I doing wrong and how to fix it?

Regards