在 TypeScript 中各种export的写法以及对应的import写法，使用场景和区别

在 TypeScript 中，export 用于将模块中的变量、函数、类、接口等导出，以便其他模块可以通过 import 导入并使用。export 的写法和使用场景有多种，以下是常见的几种方式及其区别：

1. 命名导出（Named Exports）

命名导出允许你从一个模块中导出多个值，并且导入时需要明确指定导出的名称。

写法：

// math.ts
export function add(x: number, y: number): number {
    return x + y;
}

export function subtract(x: number, y: number): number {
    return x - y;
}

export const PI = 3.14;

导入方式：

// app.ts
import { add, subtract, PI } from './math';

console.log(add(2, 3)); // 输出 5
console.log(subtract(5, 2)); // 输出 3
console.log(PI); // 输出 3.14

使用场景：

• 当需要从一个模块中导出多个值时。
• 导入时需要明确指定导出的名称。

2. 默认导出（Default Export）

默认导出允许一个模块只导出一个值（变量、函数、类、对象等），导入时可以自定义名称。

写法：

// logger.ts
export default function log(message: string): void {
    console.log(message);
}

导入方式：

// app.ts
import myLogger from './logger'; // 可以自定义导入名称

myLogger("Hello, World!"); // 输出 "Hello, World!"

使用场景：

• 当模块只需要导出一个主要功能时。
• 导入时可以自定义名称，方便使用。

3. 混合导出（Named + Default Exports）

一个模块可以同时使用命名导出和默认导出。

写法：

// utils.ts
export function greet(name: string): string {
    return `Hello, ${name}`;
}

export default function log(message: string): void {
    console.log(message);
}

导入方式：

// app.ts
import log, { greet } from './utils'; // 默认导出和命名导出一起导入

log(greet("World")); // 输出 "Hello, World"

使用场景：

• 当模块需要导出一个主要功能（默认导出）和一些辅助功能（命名导出）时。

4. 重新导出（Re-export）

重新导出允许你将其他模块的内容在当前模块中导出，通常用于组织代码或创建统一的入口。

写法：

// math.ts
export function add(x: number, y: number): number {
    return x + y;
}

// utils.ts
export { add } from './math'; // 重新导出 add 函数

导入方式：

// app.ts
import { add } from './utils'; // 从 utils.ts 导入 add 函数

console.log(add(2, 3)); // 输出 5

使用场景：

• 当需要将多个模块的功能集中到一个模块中时。
• 用于创建库的入口文件。

5. 导出所有内容（Export All）

可以将一个模块中的所有命名导出内容重新导出。

写法：

// math.ts
export function add(x: number, y: number): number {
    return x + y;
}

export function subtract(x: number, y: number): number {
    return x - y;
}

// utils.ts
export * from './math'; // 导出 math.ts 中的所有内容

导入方式：

// app.ts
import { add, subtract } from './utils';

console.log(add(2, 3)); // 输出 5
console.log(subtract(5, 2)); // 输出 3

使用场景：

• 当需要将多个模块的内容集中到一个模块中时。
• 用于创建库的入口文件。

6. 导出类型（Exporting Types）

TypeScript 支持导出类型（如接口、类型别名等），供其他模块使用。

写法：

// types.ts
export interface Person {
    name: string;
    age: number;
}

export type ID = string | number;

导入方式：

// app.ts
import { Person, ID } from './types';

const user: Person = {
    name: "John",
    age: 30,
};

const userId: ID = 123;

使用场景：

• 当需要共享类型定义时。

7. 导出命名空间（Exporting Namespaces）

TypeScript 支持导出命名空间，用于组织代码。

写法：

// math.ts
export namespace MathUtils {
    export function add(x: number, y: number): number {
        return x + y;
    }

    export function subtract(x: number, y: number): number {
        return x - y;
    }
}

导入方式：

// app.ts
import { MathUtils } from './math';

console.log(MathUtils.add(2, 3)); // 输出 5

使用场景：

• 当需要将相关的功能组织到一个命名空间中时。

总结

根据具体需求选择合适的导出方式，可以使代码更加模块化和易于维护。