Typescript不同导出方式的写法与分析
作者：zsyok
Typescript近年内的热度随时间变化的趋势,整体呈现一个上升的趋势,也说明ts越来越️受大家的关注了,这篇文章主要介绍了Typescript不同导出方式的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
下面是每种写法的分析和对比：
第一种写法：函数导出对象中的方法
// file1.ts
export const methods = () => {
const fn1 = () => console.log('fn1');
const fn2 = () => console.log('fn2');
return { fn1, fn2 };
};
// 其他文件中使用
import { methods } from './file1';
const { fn1, fn2 } = methods(); // 必须调用 `methods()` 才能获取 fn1, fn2
fn1();
特点：
返回一个方法对象（适合需要封装逻辑、带参数的场景）
每次调用
methods()会创建新的函数引用（如用于 composables）更类似组合式函数 hook 的用法
第二种写法：直接导出函数
// file2.ts
export const fn1 = () => console.log('fn1');
export const fn2 = () => console.log('fn2');
// 使用
import { fn1, fn2 } from './file2';
fn1();
特点：
最直接、最简洁的导出方式
适合工具函数（util functions）
没有封装结构，无法集中管理多个方法（除非配合命名空间）
第三种写法：导出一个对象
// file3.ts
const fn1 = () => console.log('fn1');
const fn2 = () => console.log('fn2');
export const methods = { fn1, fn2 };
// 使用
import { methods } from './file3';
methods.fn1();
特点：
将多个函数聚合为一个对象导出
使用统一命名空间（如
methods.fn1()）不需要调用函数（与 file1 不同）
三种方式对比总结
| 特性/方式 | 第一种（函数返回对象） | 第二种（分别导出函数） | 第三种（对象导出） |
|---|---|---|---|
| 是否需要调用函数 | ✅ 是 (methods()) | ❌ 否 | ❌ 否 |
| 是否可重用封装 | ✅ 是（适合 hook、封装逻辑） | ❌ 不方便集中管理 | ✅ 适合统一命名空间管理 |
| 是否支持解构调用 | ✅ 是（解构 methods() 结果） | ✅ 是（直接解构导入） | ❌ 不可（需要 methods.fn1()） |
| 场景推荐 | Composable / 逻辑复用 | 工具函数 / 工具库 | 命名空间管理的函数集合 |
建议使用方式（根据场景）：
组合式逻辑（如 Vue hooks） 👉 用第一种方式
工具函数 👉 用第二种方式
需要命名空间组织多个函数 👉 用第三种方式
总结
到此这篇关于Typescript不同导出方式的文章就介绍到这了,更多相关ts导出写法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！