What does `verbatimModuleSyntax` enforce and why did it replace `importsNotUsedAsValues`?

Q: What does `verbatimModuleSyntax` enforce and why did it replace `importsNotUsedAsValues`?

**Target Audience:** Developers who write `import` statements in TypeScript and want to know exactly which of them survive into the JavaScript, and why a modern tsconfig insists on `import type`. **Difficulty:** Medium **TypeScript version:** Every compiler message and emitted file below came from TypeScript 5.4.5 on a scratch project. `verbatimModuleSyntax` arrived in TypeScript 5.0, which deprecated `importsNotUsedAsValues` and `preserveValueImports` in its favour ([TypeScript 5.0 RC announcement](https://devblogs.microsoft.com/typescript/announcing-typescript-5-0-rc/), [tsconfig reference: verbatimModuleSyntax](https://www.typescriptlang.org/tsconfig/verbatimModuleSyntax.html)). > **How to read this doc:** Every idea is explained in plain language first, then tagged with `📌 Interview term:` so you also learn the exact words an interviewer expects. The emitted JavaScript and the `error TS....` lines are copied from real `tsc` runs, and the **Verified** section quotes the example pr

The problem

Question presented to candidate: "Your team just turned on verbatimModuleSyntax and the build is full of TS1484 errors. What does that flag actually enforce, what was wrong with the old importsNotUsedAsValues and preserveValueImports settings, and what does the emitted JavaScript look like now?"

What a strong answer should cover:

Import elision: by default tsc removes imports whose names are only used as types, and it needs the type checker (and the other file) to decide that
Why that breaks single-file transpilers (Babel, esbuild, swc, transpileModule) and can silently drop a side-effect import
The rule of verbatimModuleSyntax: anything marked type is erased, everything else is emitted exactly as written; a type imported without type is error TS1484, a re-exported type without export type is TS1205
What it replaced: importsNotUsedAsValues (remove / preserve / error) and preserveValueImports, which interacted confusingly with isolatedModules; TypeScript 5.0 deprecated both (TS5101) in favour of the new flag
Side effects of the flag: it implies isolatedModules, keeps import {} from "x" for inline type-only imports, and forbids ESM syntax in files that emit CommonJS (TS1286)

Code / implementation expected: Yes — a file with a mixed import, the emit before and after the flag, and the fixed import type / inline type forms.

verbatimModuleSyntax
imports

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Developers who write import statements in TypeScript and want to know exactly which of them survive into the JavaScript, and why a modern tsconfig insists on import type. Difficulty: Medium TypeScript version: Every compiler message and emitted file below came from TypeScript 5.4.5 on a scratch project. verbatimModuleSyntax arrived in TypeScript 5.0, which deprecated importsNotUsedAsValues and preserveValueImports in its favour (TypeScript 5.0 RC announcement, tsconfig reference: verbatimModuleSyntax).

How to read this doc: Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the exact words an interviewer expects. The emitted JavaScript and the `err

The solution is hidden so you can try first

10 min read · 9 sections

Run the code

Edit the code and run it here. Each console line with an expected value becomes a test.

TypeScriptA model of import emit under the three settings

Practice

TypeScriptOne name, two meanings: why elision needed the checker

Practice

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.