5

I'm trying to go through typescript documentation to understand modules which are the same as ES6 modules.

typescript-modules - documentation for typescript modules. It says that

Modules are executed within their own scope, not in the global scope; this means that variables, functions, classes, etc. declared in a module are not visible outside the module unless they are explicitly exported using one of the export forms. Conversely, to consume a variable, function, class, interface, etc. exported from a different module, it has to be imported using one of the import forms.

And

In TypeScript, just as in ECMAScript 2015, any file containing a top-level import or export is considered a module. Conversely, a file without any top-level import or export declarations is treated as a script whose contents are available in the global scope (and therefore to modules as well).

It says anything inside a file without import or export statements is available globally. But that's not true.

  • folder
    • script1.js
    • script2.js

script1.js

var variable = "Hello";

script2.js

console.log(variable);

According to the statement written in the documentation, when I run script2.js, it should not give any error and console the value of the variable as script1.js does not have import, export statements and thus variable is available in global scope. But it gives an error. Then what does it mean by the script's contents are available in global scope?

Miroslav Glamuzina
  • 4,472
  • 2
  • 19
  • 33
troglodyte07
  • 3,598
  • 10
  • 42
  • 66
  • My understanding, global scope refers to the scope of the variable throughout that particular script – Krishna Prashatt Apr 03 '19 at 06:49
  • 1
    "*But it gives an error.*" you might be running `script2.js` before `script1.js`. Your code *will* export `variable` to the global scope and this it would be reachable with `console.log(variable)` outside that script. You can try running that log statement in the console and it would produce the value you've put in there. Unless you have some bundling tool that automatically wraps and insulates each scripts from the global scope. – VLAZ Apr 03 '19 at 07:00
  • On a somewhat related note - JavaScript has two scopes - global and functional. That's a bit of an oversimplification but still - the contents of the script will be exported to the global scope but the scripts *content* could be a *function*. This means that anything inside will not be in the global scope. It's a common technique to isolate scripts from each other by wrapping them [in a function expression](https://stackoverflow.com/questions/1639180/how-does-the-function-construct-work-and-why-do-people-use-it) – VLAZ Apr 03 '19 at 07:03

2 Answers2

3

In an HTML file, if you do a <script src="./script2.js" /><script src="./script1.js" />, you would see Hello in the console.

vic-st
  • 15
  • 1
  • 7
Rpant
  • 974
  • 2
  • 14
  • 37
0

I think you need to run script1.js file to in order to get the variable declared. Try executing the script1.js file 1st & next script2.js

karthik
  • 1