TypeScript - Module Basics

A note about terminology: It’s important to note that in TypeScript 1.5, the nomenclature has changed. "Internal modules" are now "namespaces". "External modules" are now simply "modules", as to align with ECMAScript 2015’s terminology, (namely that module X { is equivalent to the now-preferred namespace X {).

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.

Modules are great but they can require some supporting technologies.

ES2015 (ECMA6) JavaScript was the first version of js to provide native support for modules.

To consume a variable, function, class, interface, etc. exported from a different module, it has to be imported using import.

Namespaces are used to organize/encapsulate your code.

Modules are used to organize/encapsulate your code AND to locate your code at runtime.

In ECMAScript 6 / ES2015, modules are stored in files. There is exactly one module per file and one file per module.

In practice, you have two choices at runtime:

• combine all transpiled code into one file (preferred)
• use external modules and have multiple files and require some other mechanism (Common.js or Require.js) to get at those files (boo....)

Modules import one another using a module loader. At runtime the module loader is responsible for locating and executing all dependencies of a module before executing it. Well-known modules loaders used in JavaScript are the CommonJS module loader for Node.js and require.js for Web applications. If you use or follow option 1 above (combining all ts files into a single js file), then you do not likely need Common.js or Require.js.

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).

Once you're ready, look into this course: https://app.pluralsight.com/library/courses/javascript-module-fundamentals/table-of-contents