Configuring TypeScript 16 exercises
explainer

Verbatim Module Syntax Enforces Import Type

One of the interesting things about verbatimModuleSyntax in TypeScript is that it requires a specific type of import when you're working with types. Let's take a look.

In our tsconfig.json file, we have the verbatimModuleSyntax option set to true:


// inside tsconfig.json
{
"compi

Loading explainer

Transcript

00:00 There's one other thing that verbatim module syntax does, which is it forces you to use a certain type of import when you're importing types. So if we look in our tsconfig.json we have verbatim module syntax set to true, and we have two files here. We have an index.ts file and an example.ts file,

00:16 which just contains a type of user. Now what index.ts is doing is it's importing user from example.js, but we have an error. User is a type and must be imported using a type only import

00:30 when verbatim module syntax is enabled. Okay, if we actually like import that user manually we're going to get this auto-completed in this beautiful way. Import type user. Now what this type is basically saying is that when this gets compiled down to JavaScript is that this line is going to

00:49 be completely omitted from the JavaScript because types don't actually exist. So if we look here we've got index.js and there are actually no imports here. If I remove the comments like this there are no imports inside index.js, whereas if we do this import user from example.js this will

01:08 just get put in verbatim, hence verbatim module syntax, into the outputted TypeScript or outputted JavaScript. So even though user doesn't exist here we are attempting to import it, which is why there's this error here. There's a second option here which is we can apply the type just to the

01:26 named import there, which means then that we get import from example.js but import nothing from it. Why the difference? Well if you think about this let's imagine that example.ts has a console log

01:40 in it. Hello! Like this. And what's going to happen is when you import index.js into your setup then the code in example.js is going to be run. So this stuff here, this console log which

01:56 is top level, it's going to be run immediately. This means then that just by importing index.js we're going to have a console log appear. Whereas if we apply the type to the entire row here this

02:09 means that everything in this import is only importing types. So now index.js it will no longer console log because it's not actually including the import. So the difference is really important and it gives you a kind of level of customizability because if you do want that thing to be set up,

02:29 you know, a console log to be called, a side effect to be run or whatever, then you can just target the named import like this. Or if you just want the entire import to be erased then you can do this import type here. So that's what import type does. It gives you more control over which

02:45 imports and exports are erased and verbatim module syntax basically forces you to use it.