Typescript Exporting And Importing Modules Complete Guide

Top 10 Questions and Answers: TypeScript Exporting and Importing Modules

1. What is the basic syntax for exporting a variable, function, or class from a module in TypeScript?

// Exporting a variable
export const pi = 3.14;

// Exporting a function
export function areaOfCircle(radius: number) {
    return radius * radius * pi;
}

// Exporting a class
export class Circle {
    constructor(public radius: number) {}

    area() {
        return this.radius * this.radius * pi;
    }
}

2. How do you import specific exports from different modules?

Answer: You can import specific exports by using curly braces {} to denote which entities you want to import. Suppose you have two files, math.ts and shapes.ts, with the following contents:

file: math.ts

export const pi = 3.14;
export function areaOfCircle(radius: number) {
    return radius * radius * pi;
}

file: shapes.ts

export class Circle {
    constructor(public radius: number) {}

    area() {
        return this.radius * this.radius;
    }
}

And you want to use these entities in main.ts:

file: main.ts

import { pi, areaOfCircle } from './math';
import { Circle } from './shapes';

const circle = new Circle(5);
console.log(circle.area()); // Outputs: 25

console.log(areaOfCircle(5)); // Outputs: 78.5

3. Can you explain how to use a default export in TypeScript?

Answer: A default export from a module can be a function, class, object, or primitive value, and there can only be one default export per module. To declare a default export, you use the default keyword after the export. Here’s an example:

file: myCircle.ts

export default class MyCircle {
    constructor(public radius: number) {}

    circumference() {
        return 2 * Math.PI * this.radius;
    }
}

To import a default export, you don't need to use curly braces {}:

file: main.ts

import MyCircle from './myCircle';

const circle = new MyCircle(10);
console.log(circle.circumference()); // Outputs the circumference of a circle with radius 10.

4. How do you rename exports during importing in TypeScript?

Answer: When importing, you can rename exports using the as keyword.

file: areaUtils.ts

export const calculateAreaCircle = (radius: number): number => Math.PI * radius * radius;

export class CircleShape {
    constructor(public radius: number) {}
    
    area(): number {
        return Math.PI * this.radius * this.radius;
    }
}

file: main.ts

import { calculateAreaCircle as calcCircleArea, CircleShape as ShapeCircle } from './areaUtils';

console.log(calcCircleArea(10)); // Outputs: 314.159...

let smallCircle = new ShapeCircle(5);
console.log(smallCircle.area()); // Outputs: 78.53...

5. How can you re-export entities from another module in TypeScript?

Answer: Re-exporting is useful when you want to aggregate multiple exports from different files into a single file that can then be imported easily elsewhere. Here’s how you can re-export:

file: shapeModule.ts

export class Rectangle { /* ... */ }
export class Square { /* ... */ }

file: allShapes.ts

export { Rectangle, Square } from './shapeModule';

export class Triangle { /* ... */ }

Then in another file, you can import from allShapes.ts:

file: main.ts

import { Rectangle, Square, Triangle} from './allShapes';

/*... */

6. Is it possible to import everything from a module using a namespace in TypeScript?

Answer: Yes, you can use a namespace (*) to import everything from a module into a single variable. However, the correct keyword is as. Here's an example:

file: utils.ts

export const multiply = (a: number, b: number) => a * b;
export const subtract = (a: number, b: number) => a - b;
export const add = (a: number, b: number) => a + b;

file: main.ts

import * as MathUtils from './utils';

console.log(MathUtils.multiply(4, 5)); // Outputs: 15
console.log(MathUtils.subtract(10, 5)); // Outputs: 5
console.log(MathUtils.add(2, 3)); // Outputs: 5

7. How do you handle circular dependencies in TypeScript modules?

Answer: Circular dependencies occur when module A relies on module B, and module B relies on module A. One common approach to manage them is to decouple the dependencies by restructuring the modules. Alternatively, you can convert some of the dependencies to optional using dynamic imports (import() function).

file: a.ts

import { funcB } from './b';
export const funcA = () => console.log('Function A', funcB());

file: b.ts

import { funcA } from './a';
export const funcB = () => console.log('Function B', funcA());

This would likely cause runtime issues due to undefined references; so a better structure might look like:

file: a.ts

export const funcA = async () => {
    const { funcB } = await import('./b');
    console.log('Function A', funcB());
};

file: b.ts

export const funcB = async () => {
    const { funcA } = await import('./a');
    console.log('Function B', funcA());
};

By using async and await with import(...) you ensure that funcA is defined when funcB tries to use it.

8. How should you organize your modules in a large-scale TypeScript project?

Answer: Organizing modules effectively ensures code maintainability and scalability. Here are some best practices:

• Folder Structure: Organize files into feature-specific folders. For instance, all user-related components and services could be placed under a /user folder.
• Modularization: Break down code logically. Avoid overly large modules, especially if they contain many types of functionalities. It is better to create smaller modules dedicated to specific functionalities or components.
• Use Index Files: Create an index.ts file in each folder where you can re-export functionalities from other files within the same directory. This allows you to reference the entire feature folder instead of individual files.
• Avoid Naming Conflicts: Give clear, unique names to exports to prevent naming conflicts that may lead to confusing code.

For example:

/src
  /services
    authService.ts
    userService.ts
    index.ts
  /components
    header.tsx
    footer.tsx
    index.tsx

file: services/index.ts

export { default as AuthService } from './authService';
export { default as UserService } from './userService';

file: components/index.tsx

export { Header } from './header';
export { Footer } from './footer';

9. Do TypeScript modules support wildcard imports?

Answer: TypeScript doesn’t natively support wildcard imports (like * as something for all named exports) in the same way some other languages do, mainly due to its strict type system which makes wildcard imports less practical. As we saw in Q6, you can use as to import all exported entities under an umbrella namespace.

However, TypeScript won’t infer what kind of named exports (functions, classes, etc.) are being imported with wildcard, so you will have to know them to use correctly in the imported scope.

10. When should you consider using a barrel file for exports in TypeScript?

Answer: Barrel files are essentially a convenient way to consolidate multiple exports into a single file within a module. They are useful for the following scenarios:

• Encapsulation: To hide the internal structure of a module while exposing a clean API.
• Simplification: To reduce the number of import statements in your other files. Instead of listing every file from a directory, you can import just once from the barrel file, e.g., import { ComponentA, ComponentB} from './components';
• Readability: Improves the readability and maintainability of the codebase, making it easier for developers to find and understand exports.

Example:

file: components/index.ts

export { Header } from './header';
export { Footer } from './footer';
export { Sidebar } from './sidebar';

file: main.ts