TypeScript Module Import and Export Mechanism

The module system is one of the core features of TypeScript, designed to improve maintainability and reusability by organizing code into independent modules. Modules are essentially abstractions of files; each module can contain definitions such as classes, functions, and interfaces, which are imported and exported using specific syntax. This design enables developers to load code on demand and avoids global pollution.

Module Import Mechanism

TypeScript's import mechanism is based on the declaration and usage of modules, primarily implemented through import statements. Developers can directly reference definitions from other modules by module name or locate target modules via a path resolver (e.g., import { foo } from 'path').

Syntax of Module Imports

Named Imports
```
import { add, subtract } from './math';
```
Syntax Analysis: Imports the add and subtract functions from the math module into the current scope.
Default Imports
```
import { User } from './user';
```
Syntax Analysis: User is the default export of the user module and can be used directly as the User variable.
Re-exporting (Named Export)
```
export const PI = 3.14;
```
Syntax Analysis: PI is a named export of the math module and can be referenced by other modules via import { PI } from './math'.

Path Resolution for Module Imports

TypeScript supports combinations of relative and absolute paths, such as:

./lib/: The lib folder in the current directory.
../lib/: The lib folder in the parent directory.
http://example.com/module.js: A URL for a remote module.

Export Mechanism

The export mechanism of modules is implemented through export statements, allowing developers to expose certain definitions from a module to others. Exported types include functions, classes, interfaces, variables, etc., and the exported name must be explicitly specified.

Syntax of Exports

Default Export
```
export default class Animal { ... }
```
Syntax Analysis: Animal is the default export of the animal module and can be used directly by other modules.
Named Export
```
export const PI = 3.14;
```
Syntax Analysis: PI is a named export of the math module and can be referenced by other modules via import { PI } from './math'.
Re-exporting Multiple Items
```
export { add, subtract } from './math';
```
Syntax Analysis: Exports the add and subtract functions from the math module into the current module.

Types of Exported Entities

The types that can be exported include:

Functions: export function add(a: number, b: number) { ... }
Classes: export class Animal { ... }
Interfaces: export interface User { id: number; name: string; }
Variables: export const PI = 3.14;
Modules: export default class Animal { ... }

Practical Examples of the Module System

In actual development, the module system helps developers organize code structure. For example:

Module Partitioning: Splitting functionality into independent modules, such as math, user, and api.
Dependency Management: Declaring dependency relationships through import statements to ensure correct module loading order.
Module Bundling: Using the TypeScript compiler (tsconfig.json) to generate ES6 modules that support browser compatibility.

Precautions for the Module System

Module Isolation: Each module should be independent to avoid naming conflicts.
Clear Paths: Use relative paths or URL paths to ensure accurate module location.
Export Control: Reasonably use default exports and named exports to avoid over-exposing module content.
Modular Design: Adhere to the Single Responsibility Principle; each module should focus on a single function.

Summary of the Module System

Through modular design, TypeScript's module system achieves code reusability and maintainability. Developers must master the import and export syntax of modules, organize code structures reasonably, and pay attention to dependencies between modules. A deep understanding of the module system is the cornerstone for building large-scale projects.