TypeScript的export用法示例

在 TypeScript 中，export 用于将模块中的变量、函数、类、类型等暴露给外部使用。export 语法允许将模块化的代码分割并在其他文件中导入。

1. 命名导出（Named Export）

命名导出是 TypeScript 中最常见的一种导出方式，它允许你导出多个实体，导入时需要使用相同的名字。

语法

1	export { <entity1>, <entity2>, ... };

或者直接在声明时进行导出：

1	export <entity>;

示例

1 2 3 4 5 6 7 8 9 10

// math.ts export const PI = 3.14159; export function add(x: number, y: number): number {     return x + y; } export class Calculator {     static multiply(x: number, y: number): number {         return x * y;     } }

然后在其他文件中导入：

1 2 3 4 5

// app.ts import { PI, add, Calculator } from './math'; console.log(PI);  // 3.14159 console.log(add(2, 3));  // 5 console.log(Calculator.multiply(2, 3));  // 6

部分导入

你也可以选择只导入你需要的部分：

1 2 3

// app.ts import { add } from './math'; console.log(add(5, 3));  // 8

别名导入

你可以为导入的命名实体指定别名：

1 2 3 4

// app.ts import { add as sum, Calculator as Calc } from './math'; console.log(sum(2, 3));  // 5 console.log(Calc.multiply(2, 3));  // 6

2. 默认导出（Default Export）

默认导出用于导出模块中的单个实体，@www.xuepai.net每个模块只能有一个默认导出。在导入时不需要使用花括号，可以自定义导入名称。

语法

1	export default <entity>;

示例

1 2 3 4

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

然后在其他文件中导入并使用：

1 2 3

// app.ts import greet from './greet'; console.log(greet("Alice"));  // Hello, Alice!

3. 混合使用命名导出与默认导出

你可以在一个模块中同时使用命名导出和默认导出：

1 2 3 4 5 6 7 8 9 10

// utils.ts export function add(x: number, y: number): number {     return x + y; } export function subtract(x: number, y: number): number {     return x - y; } export default function multiply(x: number, y: number): number {     return x * y; }

然后可以这样导入：

1 2 3 4 5

// app.ts@www.haoshilao.net import multiply, { add, subtract } from './utils'; console.log(multiply(2, 3));  // 6 console.log(add(2, 3));       // 5 console.log(subtract(5, 3));  // 2

4. 重命名导出（Export Aliases）

你可以在导入时或导出时使用别名。

导出时重命名

1 2 3 4 5 6 7

// math.ts const PI = 3.14159; function add(x: number, y: number): number {     return x + y; } // 使用 `as` 来重命名导出的符号 export { PI as PiValue, add as addNumbers };

导入时重命名

1 2 3 4

// app.ts import { PiValue, addNumbers } from './math'; console.log(PiValue);       // 3.14159 console.log(addNumbers(5, 3));  // 8

5. 导出整个模块（Re-export）

你可以将另一个模块的所有内容导出到当前模块中。这对于模块的组合和封装非常有用。

示例

1 2 3 4 5 6 7 8 9 10 11

// math.ts export const PI = 3.14159; export function add(x: number, y: number): number {     return x + y; } // geometry.ts export * from './math';  // 将math模块的所有导出都重新导出 // app.ts import { PI, add } from './geometry'; console.log(PI);  // 3.14159 console.log(add(2, 3));  // 5

6. 导出类型（Type Export）

除了导出变量、函数和类，TypeScript 还允许导出类型别名、接口等类型定义。

示例

1 2 3 4 5 6 7 8 9 10

// types.ts export interface Person {     name: string;     age: number; } export type Point = { x: number; y: number }; // app.ts import { Person, Point } from './types'; const john: Person = { name: "John", age: 30 }; const point: Point = { x: 10, y: 20 };

7. export = 和 import = require() 的用法

export = 和 import = require() 语法主要用于与旧版 JavaScript 模块（如 CommonJS）兼容。当你希望以 CommonJS 风格导出模块时，可以使用 export =。

示例

1 2 3 4 5 6 7

// logger.ts class Logger {     log(message: string) {         console.log(message);     } } export = Logger;

1 2 3 4

// app.ts import Logger = require('./logger'); const logger = new Logger(); logger.log('Hello, World!');

这种用法较少见，好问提示因为大多数 TypeScript 代码会使用 export 和 import 语法。

总结

• export 用于将模块中的代码暴露出去，可以导出函数、类、常量、类型等。
• export default 用于导出模块中的单个实体，导入时不需要花括号，并且可以自定义导入名称。
• 命名导出与默认导出 可以结合使用，一个模块可以有多个命名导出和一个默认导出。
• export = 用于与 CommonJS 等旧版模块系统兼容。

export 和 import 使得 TypeScript 支持模块化，帮助你组织和分离代码，提高代码的可维护性和复用性。