[Typescript] 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
{
  "compilerOptions": {
    ...
    "verbatimModuleSyntax": true
    ...

 

We're working with two files: index.ts and example.ts.

Inside of example.ts is a type called User:

// inside example.ts

export type User = {
  name: string;
  age: number;
};

In index.ts, we're trying to import User from example.js. However, we have an error:

// inside index.ts

import { User } from './example.js'; // red squiggly line under `User`

// hovering over `User` shows:
User is a type and must be imported using a type-only import when 'verbatimModuleSyntax' is enabled.

 

import type {User} from "./user"

If we start writing import type, we get an autocomplete suggestion for User. This import type syntax is great for working with types when verbatimModuleSyntax is enabled.

This syntax tells TypeScript that imported line should be completely removed from the compiled JavaScript output. That's because types are only a TypeScript thing; they don't exist in JavaScript.

We can see this if we look at the generated index.js file – there are no imports at all:

// inside dist/index.js
export {};

If we were to change our import back to import { User } from "./example.js";, without the type keyword, it would get included in the outputted JavaScript, even though User doesn't exist in example.js:

// inside dist/index.js

import { User } from "./example.js";
export {};

This is where the "verbatim" part of "verbatim module syntax" comes in- the import gets included "as is" in the output.

 

Another Option

We could actually apply the type keyword directly to the named import like this:

import { type User } from "./example.js";

Let's look at an example of how this behavior works.

Inside of example.ts, let's add a console.log statement:

// example.ts

export type User = {
  name: string;
  age: number;
};

console.log("hello!");

 

When using import { type User }, only the User type is imported.

However, if we have just import { User } without type, any top-level code in example.js like the console log statement will execute immediately. This means that simply by importing index.js, we'd also be running the console.log in example.js.

Using import type allows us to import things from the file, but specify that only the named imports are treated as types without side effects.

posted @   Zhentiw  阅读(65)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
历史上的今天:
2020-08-13 [XState] Invoke with callback
2019-08-13 [HTML5] Add Semantic Styling to the Current Page of a Navigation Item with aria-current
2018-08-13 [Algorithms] Insertion sort algorithm using TypeScript
2016-08-13 [RxJS] just, return
2016-08-13 [AngularJS] 'require' prop in Directive or Component
点击右上角即可分享
微信分享提示