当前位置: 首页 > news >正文

TypeScript的export用法

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

1. 命名导出(Named Export)

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

语法
export { <entity1>, <entity2>, ... };

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

export <entity>;
示例
// 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;}
}

然后在其他文件中导入:

// 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
部分导入

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

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

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

// 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)

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

语法
export default <entity>;
示例
// greet.ts
export default function greet(name: string): string {return `Hello, ${name}!`;
}

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

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

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

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

// 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;
}

然后可以这样导入:

// app.ts
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)

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

导出时重命名
// math.ts
const PI = 3.14159;function add(x: number, y: number): number {return x + y;
}// 使用 `as` 来重命名导出的符号
export { PI as PiValue, add as addNumbers };
导入时重命名
// app.ts
import { PiValue, addNumbers } from './math';console.log(PiValue);       // 3.14159
console.log(addNumbers(5, 3));  // 8

5. 导出整个模块(Re-export)

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

示例
// 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 还允许导出类型别名、接口等类型定义。

示例
// 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 =

示例
// logger.ts
class Logger {log(message: string) {console.log(message);}
}export = Logger;
// app.ts
import Logger = require('./logger');const logger = new Logger();
logger.log('Hello, World!');

这种用法较少见,因为大多数 TypeScript 代码会使用 exportimport 语法。

总结

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

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

http://www.lryc.cn/news/590143.html

相关文章:

  • Linux LVS集群技术详解与实战指南
  • Vue + React 联合开发指南:跨越框架边界的前端实践
  • 第二章【vue】基础(超详细)
  • 佰力博检测与您探讨高温压电d33测试的操作步骤与选购建议
  • go项目实战
  • 自学中医笔记(一)
  • PowerBI实现仅在需要图表时显示图表
  • 时序大模型为时序数据库带来的变革与机遇
  • 从零开始的云计算生活——番外3,LVS+KeepAlived+Nginx高可用实现方案
  • AWS权限异常实时告警系统完整实现指南
  • 自动化框架 Selenium 的使用
  • 74、搜索二维矩阵
  • 随机链表的复制数据结构oj题(力口138)
  • Mybatis的SQL编写—XML方式
  • 3分钟实战!用DeepSeek+墨刀AI生成智能对话APP原型图
  • 035_ClaudeCode_MCP_介绍
  • 电脑安装 Win10 提示无法在当前分区上安装Windows的解决办法
  • 【数据结构】「栈」(顺序栈、共享栈、链栈)
  • 现代前端开发流程:CI/CD与自动化部署实战
  • 多维动态规划题解——最小路径和【LeetCode】空间优化一维数组
  • 手撕设计模式之消息推送系统——桥接模式
  • Jenkins全方位CI/CD实战指南
  • U3D打包IOS的自我总结
  • 如何选择适合的云手机配置?解决资源不足带来的性能瓶颈
  • Unity Android Logcat插件 输出日志中文乱码解决
  • Kafka 与 RocketMQ 消息确认机制对比分析
  • 深度解析:Python实战京东资产拍卖平台爬虫,从ID抓取到详情数据落地
  • 2025年C++后端开发高频面试题深度解析:线程安全LRU缓存设计与实现
  • 短剧系统开发:塑造数字娱乐新未来
  • 面试150 二叉树的层序遍历