Default vs named exports

✅ Named Exports

You explicitly name what you're exporting. You can export multiple values per file.

🔸 Syntax:

// math.ts
export const PI = 3.14;
export function add(a: number, b: number): number {
  return a + b;
}

🔸 Importing:

import { PI, add } from './math';

✅ Pros:

• Encourages clarity (you see exactly what you're importing).

• Allows importing multiple items from the same file.

• IDE auto-completion and type-checking are better.

✅ Default Export

You export one main value from a module.

🔸 Syntax:

// config.ts
const API_URL = "<https://api.example.com>";
export default API_URL;

🔸 Importing:

import API_URL from './config';

You can rename the default import to anything during import.

⚖️ Key Differences

🔍 Example Comparing Both

// utils.ts
export const greet = (name: string) => `Hello, ${name}`;
export default function log(message: string) {
  console.log(message);
}

// main.ts
import log, { greet } from './utils';

log(greet("Codeveda"));  // Output: Hello, Codeveda

🔐 When to Use Which?