Pure Vanilla JavaScript
Every time you utilize the import statement, it automatically transforms into a module. However, it's possible to incorporate namespaces in conjunction with "module": "system", which can then be compiled into either one single file or multiple files.
For a basic project setup, follow these steps:
tsconfig.json
{
"compilerOptions": {
"target": "es2016",
"module": "system",
"outFile": "./lib.js"
},
"include": [
"./**/*.ts"
]
}
Then, organize your files like so:
index.ts
namespace MyNamespace {
// This is a private method that remains inaccessible from other files
// because it isn't exported.
function y() {
alert("test");
}
x(y)
}
functions.ts
namespace MyNamespace {
// This method can be accessed by other files since it's exported.
export function x(callback: () => void): void {
callback();
}
}
The resultant browser code
var MyNamespace;
(function(MyNamespace) {
function x(callback) {
callback();
}
MyNamespace.x = x;
})(MyNamespace || (MyNamespace = {}));
var MyNamespace;
(function(MyNamespace) {
function y() {
alert("test");
}
MyNamespace.x(y);
})(MyNamespace || (MyNamespace = {}));
You can utilize these methods/functions outside of the namespace simply by calling them through the namespace:
MyNamespace.y()
MyNamespace.x(MyNamespace.y)
// and so on.
Utilizing requirejs Library
To incorporate import in your project, you'll need the third-party library requirejs. This enables the use of modules within the browser environment.
So, to implement this, first set up the proper configuration file similar to the previous setup but with "module": "amd".
tsconfig.json
{
"compilerOptions": {
"target": "es2016",
"module": "amd",
"outFile": "./lib.js"
},
"include": [
"./**/*.ts"
]
}
Next, create the necessary TypeScript main file:
index.ts
requirejs(['functions'], function (util: any) {
function y() {
alert("test");
}
util.x(y)
})
Since this involves a third-party library, initialization differs (using requirejs()). This indicates to requirejs that this is the application's entry point, hence it's only required once.
functions.ts
export function x(callback: () => void): void {
callback();
}
The generated browser code
define("functions", ["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
function x(callback) {
callback();
}
exports.x = x;
});
requirejs(['functions'], function (util) {
function y() {
alert("test");
}
util.x(y);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js"></script>
If your script resides in an external file, you can employ data-main on the script tag, prompting requirejs to load the file automatically.
<script data-main="./lib" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js"></script>
Experimental Modules Usage
This functionality is still experimental and not universally supported across all browsers. To use it, simply add the type="module" attribute to your script tag:
<script type="module" src="./path/to/main.js"></script>
tsconfig.json
Note: Here we specify both a different target and module, along with an outDir.
Note: es2016 isn't a recognized module type.
{
"compilerOptions": {
"target": "es2016",
"module": "es2015",
"outDir": "./lib"
},
"include": [
"./**/*.ts"
]
}
index.ts
Note: For import statements, include a .js extension; otherwise, the browser may fail to load it unless specific rewrite rules are in place.
import { x } from './functions.js'
function y() {
alert("test");
}
x(y)
functions.ts
export function x(callback: () => void): void {
callback();
}
This will result in output almost identical to the ts files (Stackoverflow doesn't support external js files unless they're hosted somewhere, so no snippet here):
// index.js
import { x } from './functions.js';
function y() {
alert("test");
}
x(y);
// functions.js
export function x(callback) {
callback();
}