.NET Tips and Tricks

Blog archive

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 at 6:34 AM


comments powered by Disqus

Featured

  • Death of the Dev Machine?

    Here's a takeaway from this week's Ignite 2020 event: An advanced Azure cloud portends the death of the traditional, high-powered dev machine packed with computing, memory and storage components.

  • COVID-19 Is Ignite 2020's Elephant in the Room: 'Frankly, It Sucks'

    As in all things of our new reality, there was no escaping the drastic changes in routine caused by the COVID-19 pandemic during Microsoft's big Ignite 2020 developer/IT pro conference, this week shifted to an online-only event after drawing tens of thousands of in-person attendees in years past.

  • Visual Studio 2019 v16.8 Preview Update Adds Codespaces

    To coincide with the Microsoft Ignite 2020 IT pro/developer event, the Visual Studio dev team shipped a new update, Visual Studio 2019 v16.8 Preview 3.1, with the main attraction being support for cloud-hosted Codespaces, now in a limited beta.

  • Speed Lines Graphic

    New for Blazor: Azure Static Web Apps Support

    With Blazor taking the .NET web development world by storm, one of the first announcements during Microsoft's Ignite 2020 developer/IT event was its new support in Azure Static Web Apps.

  • Entity Framework Core 5 RC1 Is Feature Complete, Ready for Production

    The first release candidate for Entity Framework 5 -- Microsoft's object-database mapper for .NET -- has shipped with a go live license, ready for production.

Upcoming Events