模块导入与导出 - 元素码农

发布时间: 2025-03-31 09:29

↑

# 模块导入与导出

TypeScript的模块系统允许你组织和重用代码。本文将详细介绍如何在TypeScript中使用模块导入和导出。

## 导出声明

### 基本导出

```typescript
// math.ts

// 导出变量
export const PI = 3.14159;

// 导出函数
export function add(x: number, y: number): number {
    return x + y;
}

// 导出类
export class Calculator {
    add(x: number, y: number): number {
        return x + y;
    }
}

// 导出接口
export interface Shape {
    area(): number;
}

// 导出类型
export type Point = {
    x: number;
    y: number;
};
```

### 默认导出

```typescript
// person.ts
class Person {
    constructor(private name: string) {}
    sayHello() {
        console.log(`Hello, ${this.name}!`);
    }
}

// 默认导出
export default Person;

// 或者直接导出匿名类
export default class {
    constructor(private id: number) {}
}
```

### 重命名导出

```typescript
// utils.ts
function helper1() { /* ... */ }
function helper2() { /* ... */ }

// 重命名导出
export { helper1 as firstHelper, helper2 as secondHelper };
```

## 导入声明

### 基本导入

```typescript
// app.ts

// 导入特定成员
import { add, PI } from './math';

// 导入并重命名
import { add as addNumbers } from './math';

// 导入所有成员
import * as MathUtils from './math';

// 导入默认导出
import Person from './person';

// 同时导入默认和命名导出
import DefaultPerson, { Shape, Point } from './types';
```

### 类型导入

```typescript
// 仅导入类型
import type { Point, Shape } from './types';

// 混合导入
import DefaultClass, { type SomeType, SomeValue } from './mixed';
```

## 模块重新导出

```typescript
// index.ts

// 重新导出
export { add, PI } from './math';

// 重命名并重新导出
export { helper1 as utilityOne } from './utils';

// 重新导出所有
export * from './math';

// 重新导出默认
export { default as MyPerson } from './person';
```

## 动态导入

```typescript
// 使用动态导入
async function loadModule() {
    const module = await import('./math');
    console.log(module.add(2, 3));
}

// 或者使用Promise
import('./math')
    .then(module => {
        console.log(module.add(2, 3));
    })
    .catch(error => {
        console.error('Module loading failed:', error);
    });
```

## 模块解析策略

### 相对路径导入

```typescript
// 当前目录
import { something } from './module';

// 上级目录
import { another } from '../other/module';

// 子目录
import { stuff } from './subfolder/module';
```

### 非相对路径导入

```typescript
// 从node_modules导入
import { useState } from 'react';

// 从tsconfig.json配置的路径导入
import { MyComponent } from '@components/MyComponent';
```

## 最佳实践

1. **组织导出**：
```typescript
// index.ts
// 集中导出所有公共API
export * from './math';
export * from './utils';
export { default as Person } from './person';
```

2. **使用命名空间导入**：
```typescript
// 当模块导出很多成员时
import * as Utils from './utils';

Utils.helper1();
Utils.helper2();
```

3. **类型导入**：
```typescript
// 明确区分类型导入
import type { UserType } from './types';
import { UserService } from './services';
```

## 常见问题

1. **循环依赖**：
```typescript
// a.ts
import { b } from './b';
export const a = 1;

// b.ts
import { a } from './a';
export const b = a + 1;

// 解决方法：重构代码结构或使用接口
```

2. **模块找不到**：
```typescript
// tsconfig.json
{
    "compilerOptions": {
        "baseUrl": "./src",
        "paths": {
            "@/*": ["*"]
        }
    }
}
```

## 下一步

掌握了模块导入和导出后，你可以：

1. 学习命名空间的使用
2. 探索模块打包工具
3. 实践项目结构组织
4. 了解模块加载机制

通过合理使用模块系统，你可以更好地组织和管理TypeScript代码。