Skip to content
webtype.orgwebtype.orgtsconfig

    ↑↓ move · ⏎ open · esc close

    tsconfig

    verbatimModuleSyntax

    Imports mean what they say

    An import used only as a type must be written `import type`, so the emitted JavaScript is what the source shows.

    Since
    TypeScript 5.0
    strict
    Not in strict
    In your tsconfig
    "verbatimModuleSyntax": true
    Compiled with
    "module": "esnext""moduleResolution": "bundler"

    The same snippet both times. Only the option changed.

    With it off

    "verbatimModuleSyntax": false

    main.ts

    import { Widget } from './widget'

export const make = (): Widget => ({ id: 1 })

    widget.ts

    export type Widget = { id: number }

    Compiles clean

    With it on

    "verbatimModuleSyntax": true

    main.ts

    import { Widget } from './widget'

export const make = (): Widget => ({ id: 1 })

    widget.ts

    export type Widget = { id: number }

    Emits TS1484

    Why the compiler bothers

    The compiler used to decide for you: an import whose bindings turned out to be types only was elided from the output. That is invisible and it interacts badly with everything else — a module imported for a side effect vanishes, a bundler transpiling one file at a time cannot make the same decision, and two tools disagree about what the file is. This flag moves the decision into the source, where it is reviewable and where every tool reads the same answer.

    Takeaway

    What the file says is what the file emits. That is the whole option.

    Where to go next

    22 options