The concept of importing and exporting in typescript is thoroughly detailed in the documentation found at https://www.typescriptlang.org/docs/handbook/modules.html.
A comment by toskv highlights the significance of how TypeScript statements are transpiled into JavaScript statements, a process that heavily relies on the module system configuration set up in your tsconfig.json
file.
For instance, specifying "module": "commonjs"
will prompt the TypeScript compiler (tsc
) to convert import/export statements into node.js-style require()
calls. The documentation also provides straightforward examples of how node.js modules function: https://nodejs.org/api/modules.html.
Selecting "systemjs" instead of "commonjs" will instruct TypeScript to transform import/export statements into a format compatible with SystemJS, a mechanism I am not well-versed in.
The complexity increases in Angular 2 projects where additional build processes are required to compile the transpiled JavaScript files into bundled packages. These bundles may undergo concatenation, minification, and even obfuscation based on the specified configuration settings. Consequently, analyzing the final JavaScript output may not offer much insight as it's machine-generated.
Take Webpack for example (google webpack.js), which interprets require()
calls within JavaScript code and utilizes special techniques to organize modules within separate __webpack_require__
functions. This allows the build system to amalgamate all project components into one or multiple JavaScript files while maintaining interdependencies.
To simplify, the journey from TS Source Code
to TS Transpilation into JS Code
to
Module/Dependency Build Steps into Production JS Code
illustrates the intricate workflow involved in transforming TypeScript declarations into production-ready code.
In essence, TypeScript does not directly manage module importing/exporting. Instead, during transpilation, it converts these statements into formats compatible with other module systems such as node.js or SystemJS, which in turn are processed into deployment-ready code for an Angular 2 application.