Typescript Default And Named Exports Complete Guide

1. What are Default Exports in TypeScript?

Answer: In TypeScript, a default export allows you to export a single object, function, or primitive from a module. It can be imported with any name. Here's an example:

// math.ts
export default function add(a: number, b: number): number {
  return a + b;
}

// main.ts
import subtract from './math'; // can import with any name
console.log(subtract(5, 3)); // This will still call the add function

Note that although you can name the import anything, sticking to meaningful names is a good practice.

2. Can a Module Have More Than One Default Export?

Answer: No, a module can have only one default export. Attempting to declare more than one default export will result in a syntax error.

3. What are Named Exports in TypeScript?

Answer: Named exports allow you to export multiple values from a module. Each export must have a unique name. Imports must use the exact same name.

// math.ts
export function subtract(a: number, b: number): number {
  return a - b;
}
export const PI = 3.14159;

// main.ts
import { subtract, PI } from './math';
console.log(subtract(10, 5)); // Outputs: 5
console.log(PI); // Outputs: 3.14159

4. Can You Mix Default and Named Exports in a Single Module?

Answer: Yes, you can mix default and named exports in the same module.

// math.ts
export default function multiply(a: number, b: number): number {
  return a * b;
}
export function divide(a: number, b: number): number {
  return a / b;
}

// main.ts
import multiply, { divide } from './math';
console.log(multiply(10, 2)); // Outputs: 20
console.log(divide(10, 2));   // Outputs: 5

5. How Do You Import All Named Exports from a Module?

Answer: To import all named exports from a module, you can use the asterisk (*) symbol with an alias.

// math.ts
export function square(a: number): number {
  return a * a;
}
export function cube(a: number): number {
  return a * a * a;
}

// main.ts
import * as MathFunctions from './math';
console.log(MathFunctions.square(3));  // Outputs: 9
console.log(MathFunctions.cube(2));    // Outputs: 8

6. Is It Possible to Rename Imports During Import Operations?

Answer: Yes, you can rename imports using the as keyword. This is useful when dealing with name clashes or when you want to improve readability.

// math.ts
export default function add(a: number, b: number): number {
  return a + b;
}
export function subtract(a: number, b: number): number {
  return a - b;
}

// main.ts
import sum, { subtract as diff } from './math';
console.log(sum(5, 2));   // Outputs: 7
console.log(diff(9, 3)); // Outputs: 6

7. How Do You Export a Variable or Function as Default That Was Previously Declared Separately?

Answer: You can use the export default syntax without the function or variable name if it’s already declared.

// math.ts
function add(a: number, b: number): number {
  return a + b;
}
const PI = 3.14159;
export { add as default, PI };
// main.ts
import add, { PI } from './math';
console.log(add(5, 5)); // Outputs: 10
console.log(PI); // Outputs: 3.14159

8. Can You Import the Default and Named Exports in a Single Import Statement?

Answer: Yes, you can use a combination of the default and named imports in a single import statement.

// math.ts (same as previous example)

// main.ts
import multiply, { PI, subtract } from './math';
console.log(multiply(7, 3));   // Outputs: 21
console.log(subtract(9, 5));   // Outputs: 4
console.log(PI);              // Outputs: 3.14159

9. What are the Use Cases for Default vs. Named Exports?

Answer: Typically, default exports are preferable when exporting a single primary class, function, or object that is the main export of a module. Named exports are used when you want to export multiple functions, classes, or variables from a module.

• Default Exports: Often used when exporting a single entity, like a utility function or class.
• Named Exports: Common when exporting multiple entities from a module for clarity.

10. How Do You Combine Named Exports from Different Modules into a Single Object?

Answer: You can combine named exports from different modules using the export keyword in a new module.