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
Test your understanding
Look at the execution_table at step 1. What happens to the 'import type' statement at runtime?
AIt becomes a normal import statement
BIt is removed and does not appear in the runtime code
CIt throws a runtime error
DIt 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?
AAn object with properties name and age
BA function
CUndefined because it is a type only
DA 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?
AThe import appears in runtime code
BThe import is still removed
CThe export is removed
DNo 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.