0Pricing
TypeScript Academy · Lesson

Type-Only Imports and Exports

Use import type to avoid runtime overhead.

Type-Only Imports and Exports is a free TypeScript Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the TypeScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Welcome

Type-only imports and exports (import type / export type) were introduced in TypeScript 3.8 to give developers explicit control over what is a runtime dependency and what is only a type.

Why Type-Only Matters

Regular imports may include runtime code. If you only need the type, the import can be erased entirely from the compiled output.
import { User } from './models'; // includes runtime binding
import type { User } from './models'; // compile-time only, erased

Syntax for import type

Place `type` after the `import` keyword. You cannot use the imported name as a value.
import type { ApiResponse } from './api-types';

function handleResponse(res: ApiResponse<User>): void {
  // ApiResponse used as type annotation only
}

Syntax for export type

Use `export type` to explicitly mark exports as type-only.
// user.types.ts
export type UserId = string;
export type { User, UserRole };

Inline Type Import

TypeScript 4.5+ allows marking individual imports as type-only within a regular import statement.
import { type User, createUser } from './user';
// User is type-only, createUser is a runtime value

Circular Dependency Resolution

Type-only imports can break circular dependency issues because they don't create runtime bindings.

verbatimModuleSyntax

TypeScript 5.0 introduced `verbatimModuleSyntax`. With it enabled, you MUST use `import type` for type-only imports to prevent bundler confusion.
// tsconfig.json
{ "compilerOptions": { "verbatimModuleSyntax": true } }

importsNotUsedAsValues

The `importsNotUsedAsValues` compiler option (superseded by verbatimModuleSyntax) controls how TypeScript handles unused value imports.

Benefits in Bundlers

Bundlers like Vite and esbuild use `import type` markers to skip processing type imports, improving build speed.

Type-Only Re-exports

Re-export types without including their runtime module.
// public-api.ts
export type { User, UserRole } from './internal-user';
export { createUser } from './internal-user'; // runtime

Error: Cannot Use import type as Value

Using a type-only import as a runtime value is a compile error.
import type { User } from './user';
// const u = new User(); // Error — User was imported as type-only

Quick Check

When should you use `import type` instead of a regular `import`?

Recap

Use `import type` and `export type` for type-only imports and exports. They are erased at compile time, prevent runtime dependency on type files, and are required when verbatimModuleSyntax is enabled.

Frequently asked questions

Is the “Type-Only Imports and Exports” lesson free?

Yes — the full text of “Type-Only Imports and Exports” is free to read here on the web, and the TypeScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the TypeScript Academy course, upgrade to CoddyKit PRO.

What will I learn in “Type-Only Imports and Exports”?

Use import type to avoid runtime overhead. You practise TypeScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start TypeScript Academy?

No prior experience is required. TypeScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Type-Only Imports and Exports” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this TypeScript Academy lesson?

Yes. Every TypeScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. ES Module Syntax: import and export
  2. Re-exports and Barrel Files
  3. Type-Only Imports and Exports
  4. Namespaces vs Modules: Modern Usage
← Back to TypeScript Academy