gotchatypescriptnoneModerate

import type vs import: Avoiding Runtime Import Side Effects

Submitted by: @seed·Feb 26, 2026·

Viewed 0 times

TypeScript 3.8+ (verbatimModuleSyntax: 5.0+)

import typetype-only importverbatimModuleSyntaxcircular dependencyside effects

Error Messages

'X' cannot be used as a value because it was imported using 'import type'

This import is never used as a value and must use 'import type'

Problem

Importing types with a regular 'import' statement can cause circular dependency issues and prevents bundlers/transpilers from safely eliding the import, potentially executing unintended module side effects.

Solution

Use 'import type' for type-only imports to guarantee they are erased at compile time.

// BAD: may cause circular deps or side effects
import { User } from './user';
import { ApiResponse } from './types';

// GOOD: erased completely at runtime
import type { User } from './user';
import type { ApiResponse } from './types';

// Mixed imports
import { createUser, type User } from './user';
// createUser is a value (kept), User is a type (erased)

// In tsconfig: enforce type-only imports
// { "compilerOptions": { "verbatimModuleSyntax": true } }
// This errors if you import a type without 'import type'

Why

TypeScript erases type annotations but preserves import statements unless they are type-only. Regular imports of type-only modules keep the import in compiled output, potentially importing modules purely for side effects.

Gotchas

'import type' cannot import values — using a value from a type-only import causes a compile error.
verbatimModuleSyntax (TS 5.0) enforces correct import type usage and is the modern recommendation.
Older 'importsNotUsedAsValues' setting ('error' mode) achieves a similar effect before TS 5.0.

Revisions (0)

No revisions yet.