TypeScript Import and Export

In TypeScript, import and export are essential features for modularizing code. They allow you to split your code into multiple files, making it easier to maintain and test. The import keyword is used to bring code from other modules, while the export keyword is used to share parts of a module with others.

 

What is Import and Export?

1. Export: This keyword is used to expose functions, variables, classes, interfaces, etc., from a module. This makes them accessible to other files.
2. Import: This keyword is used to bring in the exported elements from one module into another.

 

Exporting in TypeScript

1. Named Exports

Named exports allow you to export multiple elements from a module by specifying their names.

Example: Exporting Variables, Functions, and Classes

// file: math.ts

export const pi = 3.1415;

export function add(x: number, y: number): number {
  return x + y;
}

export class Calculator {
  static multiply(x: number, y: number): number {
    return x * y;
  }
}

• In this example, pi, add(), and Calculator are exported from the math.ts file using the export keyword.

2. Default Exports

You can also export a single value as the default export from a module. This is useful when a module has only one main component.

Example: Default Export

// file: multiply.ts

export default function multiply(x: number, y: number): number {
  return x * y;
}

• Here, multiply is the default export from the multiply.ts file.

 

Importing in TypeScript

1. Importing Named Exports

When importing from a module, you can use the import statement to access the named exports. You must refer to the exported items by their exact name inside curly braces.

Example: Importing Named Exports

// file: app.ts
import { pi, add, Calculator } from './math';

console.log(`Pi: ${pi}`);
console.log(`Sum: ${add(5, 3)}`);
console.log(`Product: ${Calculator.multiply(5, 3)}`);

• Here, we are importing pi, add, and Calculator from the math.ts file.

2. Importing Default Exports

For default exports, you can import the module without curly braces and assign it any name you like.

Example: Importing Default Export

// file: app.ts
import multiply from './multiply';

console.log(`Product: ${multiply(5, 3)}`);

• Since multiply is the default export, we can import it directly without curly braces.

3. Renaming Imports

If there are naming conflicts or if you want to use a different name for an imported component, you can rename it during the import.

Example: Renaming Imports

// file: app.ts
import { add as sum, Calculator } from './math';

console.log(`Sum: ${sum(5, 3)}`);
console.log(`Product: ${Calculator.multiply(5, 3)}`);

• In this case, add is imported and renamed to sum.

4. Importing All Exports from a Module

If you want to import all the exported components from a module, you can use the * as syntax. This will create a single object that contains all the exports from the module.

Example: Importing All Exports

// file: app.ts
import * as math from './math';

console.log(`Pi: ${math.pi}`);
console.log(`Sum: ${math.add(5, 3)}`);
console.log(`Product: ${math.Calculator.multiply(5, 3)}`);

• Here, all the exports from math.ts are available as properties of the math object.

 

Re-exporting from Modules

You can also re-export exports from other modules without directly importing them.

Example: Re-exporting from a Module

// file: allMath.ts
export * from './math';

• The allMath.ts file re-exports everything from math.ts.

Importing from a Re-exported Module

// file: app.ts
import { pi, add, Calculator } from './allMath';

console.log(`Pi: ${pi}`);
console.log(`Sum: ${add(5, 3)}`);
console.log(`Product: ${Calculator.multiply(5, 3)}`);

• By importing from allMath.ts, you gain access to all the exports from math.ts.

 

Module Resolution in TypeScript

TypeScript uses module resolution to find and load modules. The resolution strategy tells TypeScript how to locate files when you use import. There are two main strategies:

1. Classic Resolution (default in TypeScript)
2. Node Resolution (used in Node.js environments)

TypeScript can resolve modules by file paths or node modules, depending on the configuration in tsconfig.json.

 

Summary

• Exporting: Use export to share variables, functions, classes, or interfaces from a module.
• Importing: Use import to access components from other modules.
• Named Exports: Use curly braces {} to import specific components.
• Default Exports: Import without curly braces for a single default export.
• Renaming Imports: You can rename imports using the as keyword.
• Re-exporting: Re-export modules to combine multiple exports into one.
• Module Resolution: TypeScript uses strategies like Classic and Node resolution to find modules.

Using import and export makes your TypeScript code modular, easier to maintain, and reusable across different files.