Overview
Modules in TypeScript are a powerful feature that allows for organizing and structuring code in a more maintainable and scalable way. They help in encapsulating functionality, managing dependencies, and promoting reusability across the codebase. Understanding modules is crucial for developing large-scale applications and for efficient team collaboration.
Key Concepts
- Modules vs. Namespaces: Understanding the difference and when to use each.
- Exporting and Importing: How to expose module functionality and consume it in other parts of the application.
- Default and Named Exports/Imports: The two types of exports/imports and their use cases.
Common Interview Questions
Basic Level
- What is a module in TypeScript?
- How do you export a function from a module?
Intermediate Level
- How do you import only a specific part of a module?
Advanced Level
- Discuss the trade-offs between using multiple named exports vs. a single default export in a module.
Detailed Answers
1. What is a module in TypeScript?
Answer: A module in TypeScript is a file containing related code such as classes, interfaces, functions, or variables, which can be exported and then imported by other modules. This helps in organizing code into distinct blocks with specific functionalities, making it easier to maintain, reuse, and manage dependencies.
Key Points:
- Modules are executed within their own scope, not in the global scope.
- Anything not explicitly exported remains private to the module.
- Modules help in splitting up the code base into smaller, manageable pieces.
Example:
// mathUtils.ts
export function add(x: number, y: number): number {
return x + y;
}
export function subtract(x: number, y: number): number {
return x - y;
}
2. How do you export a function from a module?
Answer: You can export a function from a TypeScript module using the export keyword before the function declaration. This makes the function available to be imported by other modules.
Key Points:
- Exported functions can be named or anonymous.
- You can also export multiple items using a single export statement.
- The export keyword exposes the function to other modules.
Example:
// calculator.ts
export function multiply(x: number, y: number): number {
return x * y;
}
// OR exporting multiple items
export { multiply, add as addition };
3. How do you import only a specific part of a module?
Answer: To import only a specific part of a module, use the import statement with curly braces {} around the specific exports' names you want to import. This is known as a named import.
Key Points:
- Named imports allow for importing only what is needed, potentially optimizing the bundle size.
- You can also rename imports using the as keyword for better readability or to avoid naming conflicts.
- Destructuring can be used to import multiple exports in a single statement.
Example:
// Importing specific functions from a module
import { add, subtract as minus } from './mathUtils';
console.log(add(10, 5)); // Output: 15
console.log(minus(10, 5)); // Output: 5
4. Discuss the trade-offs between using multiple named exports vs. a single default export in a module.
Answer: Choosing between named exports and default exports depends on the module's structure and the intended use case.
Key Points:
- Named Exports: Promote explicit imports, making it clear what functions or objects are being used. They support multiple exports per module, which is ideal for utility libraries. However, they require more verbose import statements if many items are imported.
- Default Exports: Simplify import statements for modules that export a single entity, making them slightly easier to import. However, they can lead to naming discrepancies across the codebase since importers can name them arbitrarily.
Example:
// Using named exports
export function calculateArea(radius: number): number {
return Math.PI * radius * radius;
}
// Using a default export
export default class Circle {
constructor(public radius: number) {}
calculateArea(): number {
return Math.PI * this.radius * this.radius;
}
}
Choosing between named and default exports should be based on whether you expect the module to export a single main thing or multiple utilities/entities.
