Type-only imports and exports in Typescript - Step-by-Step Execution

Concept Flow - Type-only imports and exports

Write type-only import/export

↓

Compiler removes type-only code

↓

Runtime code has no import/export

↓

Types used only at compile-time

↓

No runtime overhead or errors

Type-only imports and exports bring types into a file for checking but disappear when the code runs.

Execution Sample

Typescript

import type { User } from './models';

export type { User };

const user: User = { name: 'Alice', age: 30 };

This code imports and exports the User type only, so it exists at compile time but not at runtime.

Execution Table

Step	Code Line	Action	Runtime Effect	TypeScript Effect
1	import type { User } from './models';	Import User type only	No import in runtime JS	User type available for type checking
2	export type { User };	Export User type only	No export in runtime JS	User type exported for other TS files
3	const user: User = { name: 'Alice', age: 30 };	Declare user variable with User type	Creates user object at runtime	Type checked as User shape
4	End of file	No more code	No leftover import/export code	Type-only imports/exports removed

💡 Type-only imports and exports are removed before runtime, so no JS import/export code remains.

Variable Tracker

Variable	Start	After Step 3	Final
User	undefined (type only)	Type available for checking	Type available for checking
user	undefined	{ name: 'Alice', age: 30 }	{ name: 'Alice', age: 30 }

Key Moments - 3 Insights

Why doesn't the import type statement appear in the final JavaScript code?

Because 'import type' is only for TypeScript's type checking and is removed during compilation, as shown in execution_table step 1.

Can you use 'User' type at runtime after importing it with 'import type'?

No, 'User' exists only at compile time for type checking and is not present at runtime, as shown in variable_tracker where 'User' is type-only.

What happens if you try to use a type-only import as a value at runtime?

It causes an error because the type is removed from the JavaScript output, so no runtime value exists, as explained in execution_table step 1 and 4.

Visual Quiz - 3 Questions

Look at the execution_table at step 1. What happens to the 'import type' statement at runtime?

A It becomes a normal import statement

B It is removed and does not appear in the runtime code

C It throws a runtime error

D It is converted to a require statement

💡 Hint

Check the 'Runtime Effect' column in execution_table step 1

According to variable_tracker, what is the value of 'User' after step 3?

A An object with properties name and age

B A function

C Undefined because it is a type only

D A string

💡 Hint

Look at the 'User' row in variable_tracker after step 3

If you remove 'type' from 'import type { User }', what changes in the execution_table?

A The import appears in runtime code

B The import is still removed

C The export is removed

D No change

💡 Hint

Compare runtime effects of 'import type' vs normal import in execution_table step 1

Concept Snapshot

Type-only imports and exports use the 'type' keyword.
They bring types for compile-time checks only.
No JavaScript code is generated for them.
Use 'import type { T } from ...' and 'export type { T }'.
This avoids runtime overhead and errors.

Full Transcript

This visual execution shows how TypeScript handles type-only imports and exports. The 'import type' and 'export type' statements bring types into the file for checking but are removed when the code compiles to JavaScript. The execution table traces each step: importing the type, exporting it, and using it to type-check a variable. The variable tracker shows that the 'User' type exists only for checking and does not become a runtime value. Key moments clarify why these imports disappear and why you cannot use types at runtime. The quiz tests understanding of these runtime removals and type-only behavior. The snapshot summarizes the syntax and purpose of type-only imports and exports.

Practice

1. What is the main purpose of using import type in TypeScript?

easy

A. To export types from a module.

B. To import both types and runtime values together.

C. To import only runtime values and ignore types.

D. To import only types without including any runtime code.

Solution

1. Step 1: Understand the role of import type

   This syntax imports only type information, not actual code that runs.

2. Step 2: Compare with normal imports

   Normal imports bring in both types and runtime code, but import type excludes runtime code.

3. Final Answer:

   To import only types without including any runtime code. -> Option D

4. Quick Check:

   Type-only imports = import type [OK]

Hint: Remember: import type brings types only, no code. [OK]

Common Mistakes:

• Thinking import type imports runtime code
• Confusing import type with normal import
• Using import type to export types

2. Which of the following is the correct syntax to export only types from a TypeScript module?

easy

A. export { MyType } from './types';

B. export type { MyType } from './types';

C. export import type MyType from './types';

D. export only type MyType from './types';

Solution

1. Step 1: Identify correct export type syntax

   TypeScript uses export type { ... } to export only types.

2. Step 2: Check other options

   export { MyType } from './types'; (export { MyType } from './types';) exports both types and values. Options B and C are invalid syntax.

3. Final Answer:

   export type { MyType } from './types'; -> Option B

4. Quick Check:

   Type-only export = export type [OK]

Hint: Use export type {} to export types only. [OK]

Common Mistakes:

• Using normal export instead of export type
• Writing invalid syntax like export only type
• Confusing import syntax with export syntax

3. Consider the following code snippet:

import type { User } from './models';

function greet(user: User) {
  console.log(`Hello, ${user.name}`);
}

greet({ name: "Alice" });

What will happen when this code is compiled and run?

medium

A. It will print 'Hello, ' followed by the user's name at runtime.

B. It will cause a runtime error because User is not imported as code.

C. It will fail to compile because import type cannot be used with functions.

D. It will import the full User class including methods.

Solution

1. Step 1: Understand import type usage

   The import type imports only type info, which is erased at runtime.

2. Step 2: Check runtime behavior

   The function uses User only as a type for parameter. At runtime, it expects an object with a name property.

3. Final Answer:

   It will print 'Hello, ' followed by the user's name at runtime. -> Option A

4. Quick Check:

   Type-only import works for typing, no runtime error [OK]

Hint: Type-only imports vanish at runtime but keep type safety. [OK]

Common Mistakes:

• Expecting runtime import of types
• Thinking import type causes runtime errors
• Confusing compile-time types with runtime values

4. Identify the error in this TypeScript code:

import type { Config } from './config';

export { Config };

medium

A. You cannot export a type that was imported with import type.

B. The import type statement is missing a semicolon.

C. You must use export type { Config } to export the type correctly.

D. There is no error; this code works fine.

Solution

1. Step 1: Check import and export compatibility

   Types imported with import type must be exported with export type.

2. Step 2: Identify correct export syntax

   Using normal export { Config } tries to export a runtime value, which does not exist.

3. Final Answer:

   You must use export type { Config } to export the type correctly. -> Option C

4. Quick Check:

   Type-only export matches type-only import [OK]

Hint: Match import type with export type. [OK]

Common Mistakes:

• Exporting type-only imports as normal exports
• Ignoring that types do not exist at runtime
• Confusing semicolon errors with syntax errors

5. You have a module shapes.ts exporting types and values:

export type Circle = { radius: number };
export const PI = 3.14;

You want to import only the type Circle in another file without importing PI. Which is the best way?

hard

A. import type { Circle } from './shapes';

B. import { Circle } from './shapes';

C. import { Circle, PI } from './shapes';

D. import type { Circle, PI } from './shapes';

Solution

1. Step 1: Understand import type behavior

   import type imports only types, no runtime values like PI.

2. Step 2: Check options for importing only Circle

   import type { Circle } from './shapes'; imports only the type Circle without bringing in PI.

3. Final Answer:

   import type { Circle } from './shapes'; -> Option A

4. Quick Check:

   Use import type to avoid importing values [OK]

Hint: Use import type to import only types, no values. [OK]

Common Mistakes:

• Using normal import and importing unwanted values
• Trying to import values with import type
• Importing both types and values when only types are needed