Production-Grade TypeScript Production-Grade TypeScript

Declaration Files & Type-only Imports

Check out a free preview of the full Production-Grade TypeScript course:
The "Declaration Files & Type-only Imports" Lesson is part of the full, Production-Grade TypeScript course featured in this preview video. Here's what you'd learn in this lesson:

Mike explains how declaration files can be generated from JavaScript files so projects containing JavaScript code can still offer first-class TypeScript support. Modules also support type-only imports so compilers can skip importing entire codebases when the type information is the only requirement.

Get Unlimited Access Now

Transcript from the "Declaration Files & Type-only Imports" Lesson

[00:00:00]
>> So the last category of things, and there's some details I'm skipping over here, some things that I feel are potentially less relevant to the everyday TypeScript user. But the last category of things that have been added to TypeScript since the last course was recorded are really two things.

[00:00:18] Number one, as of TypeScript 3.7, declaration files can be generated from JavaScript. So in your tsconfig, you can have allowJs and you can even have checkJs. So this will allow you to type-check well-documented JavaScript as if it were kind of TypeScript, right? So you use JSDoc comments and you say, here's my parameter coming into this function, it is of type string, etc, etc.

[00:00:52] So now you could conceivably have set your code base up that way. And if it were a library, as of TypeScript 3.7, you can generate declaration files, those DTS files. So consumers of your library will be able to get all the benefits as if you wrote your library in TypeScript.

[00:01:17] This was not the case until recently, and it's a bigger deal than one would think. Because many documentation tools, in fact, the one I'm going to talk about today, they consume declaration files as their input. So more than simply making that file available for autocomplete purposes, this allows well-documented JavaScript to be more of a first-class citizen in the TypeScript ecosystem, right?

[00:01:47] There are just fewer and fewer things where, you don't get that benefit unless you're using a TS file. Finally, last thing I wanna mention is the concept of type-only imports. I will show you how this works when we get into the code base, but it's really just something like the following.

[00:02:05] import type, and then we find the file. So we do it like this. I've got a module here, and I can just say, I simply want the type information from this module, I'm not importing the value. So if I were here to try to invoke this, I think I should get an error.

[00:02:43] There we go, it cannot be used as a value because it was imported using import type. Why is this important? Well, raise your hand if you use something like Parcel or Webpack as your module bundler in your app. import type allows us to consume type information only. We took a show of hands in the class, and turns out a lot of people use Webpack or Parcel, things like this.

[00:03:11] So these module bundlers, they rely on basically analyzing the code that you import as a mechanism of splitting things up. So you don't need to send more code to your users, especially for browser-based apps. Don't wanna send more code to them than they need for maybe that first page load.

[00:03:29] Import type is a way that we can refer to type information in another module, without saying, I actually need that value. I need that function because I plan to invoke that function, right? So this won't sort of trigger additional code being included in your bundle. Type information's just a build-time construct, so this is a nice way of making sure that everything remains loosely coupled.