Modules & CJS Interop Overview

[00:00:00]
>> So when we were talking about the list of topics we're gonna cover today, I mentioned that the JavaScript ecosystem is in a transition period. Where we've been using a particular module syntax in terms of imports and exports for a long time now, right? Since ES2015, this was defined as a standard that we knew was going somewhere.

[00:00:25]
The big thing that has changed recently in the past couple of years is official support has landed for running modern JavaScript modules directly in NoJS and in browsers. If you've ever seen a file that ends in MJS, that's the file extension. You've seen this. And part of why I have chosen to include some coverage of this topic in intermediate TypeScript is while we're in this transition period, which will happen over many years, you're gonna have to deal with mixing both old-style modules and new-style modules.

[00:01:01]
So we're gonna talk about the new-style modules, all of the kinds of things you can do to import and export. TypeScript adds a couple things to what can already be done in a modern JavaScript project. We're going to talk about importing types, which is of particular importance. If in your project, you have something like Babel or Webpack, which, if those tools are responsible for actually emitting the resultant JavaScript from your TypeScript program, importing types is super important.

[00:01:36]
To import types only as opposed to something that has a value and a type. So we'll talk about why that is and then how to go ahead and do that. We'll talk about CommonJS interop, right? If you have an old-style CommonJS dependency of some sort, how do you consume the types of this thing?

[00:01:55]
And this is one of those situations where, most of the time, you don't have to worry about this and it kind of works with a simple convention. But there are some really interesting things that can happen in specific cases, and it can be a real headache if you don't know what to do.

[00:02:13]
And I'm gonna give you the medicine for that headache. I'm gonna give you the way to do this. And I'm gonna give you a way to do it that doesn't involve changing compiler settings. Which is sometimes undesirable, particularly if you're building a library, right? Sometimes, enabling one of these compiler settings to get your types to work, that will require anyone who consumes your library to also enable those settings.

[00:02:37]
So we'll talk about how we can avoid doing that. There is a path to doing that and we'll go over it. Next we'll talk about native ES module support, and that is the idea of working with, in your own project, a mix of CommonJS and modern module formats.

[00:02:58]
How do we interop between these? How do you import across those boundaries and deal with these things side by side? And then, finally, we'll talk about importing non-TypeScript things. So if you've used Webpack before, you ever imported a CSS file or an image just to indicate that this thing should be loaded for a particular component.

[00:03:20]
Sometimes you import an image in something like Webpack. If you have a file loader, Webpack plugin, it'll give you the URL of the image that you can place somewhere. But how do we make TypeScript happy with that? It's not a TypeScript file, we still use the imports in Next.

[00:03:37]
What do we need to do to make that work? So that's our modules and CJS interop section here.