Load TypeScript Modules as You Need Them
In the bad old days you put all your JavaScript code into a single file and loaded that file on every page that needed any of your code. As the amount of JavaScript code increased, you started organizing your code into files and loading just the files you needed.
Currently, you can organize your code into modules and, for any particular module, specify what other modules it needs. Using a module loader, those other modules will automatically be loaded for you.
In the current version of TypeScript you can now load a module only if you actually need it. If you have a section of code that isn't always executed but requires some additional module support when it is used, then you can load that support dynamically at run time.
All you need to use is the import method, passing the relative path name to the file containing the module you need.
Of course, it will take a while for that file to be fetched and the module it contains made available. To handle that you can use the async and await keywords to make sure that you don't use that support until it's ready.
Typical code might look like this:
async function doSomethingAdHoc(): Promise<void> {
if (userRequestedASpecialFunction) {
await import('...relative path to JavaScript file...');
...do something...
}
}
Posted by Peter Vogel on 02/08/2018