ES Modules (named vs default), re-exports
Understand named vs default exports/imports and how to re-export to build tidy module boundaries.
ES Modules (named vs default), re-exports is a free TypeScript Academy lesson on CoddyKit — lesson 1 of 3. 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 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Intro
Goal: Use ES Modules confidently. You will export/import named and default symbols, then compose them with re-exports for tidy public APIs.
Named exports/imports
Named exports use export before declarations; import them with braces: import { name }.
// file: math.ts
export function add(a: number, b: number): number { return a + b }
export const PI = 3.14159
// file: app.ts
import { add, PI } from "./math"
console.log(add(2, 3), PI) // 5 3.14159Default export/import
Default export is a module’s primary value. Import it without braces: import Foo from "./mod".
// file: greet.ts
export default function greet(name: string) { console.log(`Hello, ${name}`) }
// file: app.ts
import greet from "./greet"
greet("Ada")Default + named together
You can combine one default with multiple named exports in a module and import both together.
// file: color.ts
export default "black"
export const palette = [ "red", "green", "blue" ]
// file: app.ts
import baseColor, { palette } from "./color"
console.log(baseColor, palette.length)Re-exports (barrels)
Re-exports (export { x } from / export * from) create a barrel, so consumers import from a single entry.
// file: math/add.ts
export const add = (a: number, b: number) => a + b
// file: math/index.ts (barrel)
export { add } from "./add"
export * from "./more"
// file: app.ts
import { add } from "./math"
console.log(add(1, 2))Tips & pitfalls
Tips:
- Prefer named exports for discoverability and consistent renames.
- Use default export for a module’s single “main” thing.
- Build barrels at package boundaries; avoid circular imports.
Default import check
Quick check: Which import matches a default export?
Recap
Recap: Use named for multiple exports, default for a single primary value, and re-exports to present a clean entry point.
Frequently asked questions
Is the “ES Modules (named vs default), re-exports” lesson free?
Yes — the full text of “ES Modules (named vs default), re-exports” is free to read here on the web, and the TypeScript Academy course includes 3 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 “ES Modules (named vs default), re-exports”?
Understand named vs default exports/imports and how to re-export to build tidy module boundaries. 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 1 of 3, so you can start here or from the beginning and move at your own pace.
How long does the “ES Modules (named vs default), re-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
- ES Modules (named vs default), re-exports
- Ambient declarations (.d.ts) & third-party typings
- Path mapping & module resolution