Dynamic JavaScript Module imports with TypeScript
ECMAScript modules added to the specification in ES6 (AKA ES2016) are now the de-facto way of writing modular JavaScript. The next step for modular JavaScript are dynamic imports. With dynamic expressions developers can include snippets of code on the fly when the app is running.
The JavaScript specification works so that features go through the TC39 group through different stages in maturity. A feature moves from stage 0 ("strawman"), to stage 1 ("proposal"), to stage 2 ("draft") to stage 3 ("proposal"). From stage 3 features are likely to be a part of the next speification of the language.
Dynamic imports have been at stage 3 for some time, so they will be likely be standardised in either 2018 (ES2018) or latest during 2019. TypeScript is a programming language that builds on the ECMAScript (the JavaScript specification), by adopting coming features beforehand.
Dynamic Imports allow writing truly modular JavaScript which works completely on the client side - without precompilation on the server. This is an option which provides a practical solution to a common issues, large bundle sizes in comprehensive Single Page Applications (SPA).
Since TypeScript 2.4 the TypeScript language has had support for Dynamic Imports. In a recent article Marius Schultz, an active community member, discusses how to use dynamic module imports with TypeScript starting today.
The functionality builds on promises, so it will be familiar to developers writing ES6+ syntax JavaScript:
Since fetching an ECMAScript module on demand is an asynchronous operation, an import() expression always returns a promise. That promise resolves once the widget module and all its dependencies have feen fetched, instantiated, and evaluated successfully.
Learn how to take use of dynamic imports with frameworks and libraries like Angular, Vue.js and React with TypeScript.
Tweet