TypeScript export default 怎么用

在日常开发中，很多前端同学都会遇到代码“分家”的情况——比如把页面组件、工具函数、配置项分别存进不同的文件里，需要用的时候再“请过来”。就像你整理衣柜，把T恤、裤子、袜子分开放在不同抽屉，出门前找T恤，不会翻遍整个衣柜，直接打开T恤抽屉就行。这种代码拆分的操作，靠的就是JavaScript里的“导入导出”机制，而TypeScript里的export default，就是帮你快速拿“核心物品”的便利钥匙。

先搞懂：`export default` 和普通导出有啥不一样？

要理解export default，得先知道JS里有两种导出方式：一种是直接标注“我要导出这个”，叫“命名导出”；另一种是像贴了“核心款”标签，只贴一个，叫“默认导出”。打个比方：

你开了个小杂货铺，货架上有3瓶可乐（可乐A、可乐B、可乐C），这就像命名导出——你会给每瓶贴“可乐A”“可乐B”的标签，顾客要哪瓶，直接喊名字就行；但如果有瓶是“招牌限定可乐”，只摆1瓶，贴个“本店核心款”的标签，不用喊名字，顾客进店问“核心款是啥”，你直接指这瓶就行，这就是export default。

简单说：命名导出可以有多个，名字固定；export default只能有1个，名字可以自己随便起。

第一步：用`export default`给文件“定核心”

假设你有个文件叫userInfo.ts，专门存用户信息的核心函数，你想让这个文件对外只暴露最核心的“获取用户昵称”的函数，其他辅助函数（比如格式化日期）藏起来，就可以用export default：

`typescript

// userInfo.ts

// 辅助函数：格式化日期（不想对外暴露）

const formatDate = (date: Date): string => {

return date.toLocaleDateString('zh-CN');

};

// 核心函数：获取用户昵称（用export default标记为默认导出）

export default function getUserName(userId: number): string {

// 实际项目里会调接口拿数据，这里简化演示

const userMap = { 1: '小明', 2: '小红' };

return userMap[userId] || '匿名用户';

}

`

这个文件里，只有getUserName是“核心款”，其他函数就像藏在货架里的杂物，外面用的时候拿不到。

第二步：用`import`拿默认导出的内容

当你需要在另一个文件（比如profile.ts）里用这个核心函数，导入的时候不用管原来的函数名，自己随便起个名字就行，这就是default的灵活之处：

`typescript

// profile.ts

// 导入userInfo.ts的默认导出，给它改名叫getNickname

// 注意：默认导出的导入名不需要和原函数名一致，用花括号的是命名导出，这里没有花括号

import getNickname from './userInfo';

// 使用导入的核心函数

const userNickname = getNickname(1);

console.log(userNickname); // 输出：小明

`

如果原函数叫getUserName，你也可以叫它getNickname、getUserAlias，甚至随便起个myFunc，只要变量名合法就行，这就是默认导出的优势——不用记对方的名字。

常见误区：别和命名导出搞混

很多新手会把export default和命名导出搞混，这里举个反例：

如果userInfo.ts里同时用了命名导出和默认导出，导入的时候要注意格式：

`typescript

// 错误写法：同时导入默认和命名，不能混写

import getNickname, { formatDate } from './userInfo'; // 对！默认写前面，命名放花括号里

`

再举个容易踩坑的例子：有人写export default const a = 1;，这会报错！因为export default导出的是“值”，不是“变量声明”，正确写法是先声明，再导出：

`typescript

// 错误

export default const a = 1;

// 正确

const a = 1;

export default a;

`

总结

export default就像你买奶茶时的“指定款”标签，一个文件里只能贴一个，导入时可以随便给它起名字，核心作用就是快速标记并获取文件里的核心内容，让代码拆分更清晰。只要记住两个关键点：一个文件最多一个export default，导入时不用花括号，名字自己定，就能轻松用它管理TypeScript里的代码模块了。