TypeScript 如何导入导出
大家在写代码的时候，会不会遇到“写好的函数/变量，想挪到别的文件用，却不知道怎么拿过来”的情况？比如你在A文件里做了一个计算奶茶店利润的小函数，在B文件里做奶茶销量统计，总不能把这个函数再写一遍吧？这时候导入导出就派上用场了，今天咱们就用生活化的例子，把这件事说清楚。
先搞懂最基础的：什么是导入导出？
简单说，导入导出就像你家里的储物间和客厅的关系——储物间里放着你的闲置物品（比如你做奶茶的专属杯子），导出就相当于“把杯子从储物间拿出来，放到客厅”；而导入就是“从邻居家的客厅，把他的杯子拿过来用”。
在TypeScript里，我们把一个文件里的“变量、函数、类这些能被用的东西”，统称为“模块成员”，导入导出就是让不同文件的模块成员可以互相调用的规则。举个实际的小例子：你做了一个卖水果的文件（fruit.ts），里面写了苹果单价和计算总价的函数，这就是准备导出的东西。
导出：3种常用的方式，对应不同的需求
导出不是只有一种写法，得看你想把多少东西“拿出来用”，选最合适的就行。
第一种最简单：单独导出每个需要的东西。比如你想把水果文件里的苹果单价和算总价的函数都导出去，就在每个要导出的东西前面加export：
`typescript
// fruit.ts
export const applePrice = 8; // 苹果单价8元
export function calculateTotal(weight: number) { return applePrice * weight; }
`
这样写的好处是一目了然，别人一看就知道这个文件里哪些是可以用的，不会乱。
第二种：把所有要导出的东西打包成一个整体导出。如果一个文件里有十几个要导出的内容，一个个加export太麻烦，可以用export后面跟大括号，把要导出的东西打包：
`typescript
// fruit.ts
const applePrice = 8;
const bananaPrice = 5;
function calculateTotal(weight: number, price: number) { return weight * price; }
export { applePrice, bananaPrice, calculateTotal };
`
这个打包的写法，就像你把零食都装在一个收纳袋里，要拿的时候直接拿袋子就行，不用一个个递。
第三种：默认导出——给文件留一个“主功能”。有些文件的核心功能只有一个，比如专门写一个“水果店总账单生成器”，这时候可以用export default，它的特点是导入的时候可以随便起名。比如：
`typescript
// bill.ts
export default function generateBill(items: string[]) {
return 今日账单：${items.join('、')} 共结算;
}
`
就像你去别人家，默认给你递的是他家的主饮料（比如奶茶），要是你想换个名字叫“我的专属饮料”也行，后面导入的时候就能体现。
导入：对应导出的方式，拿过来用就这么简单
导入的逻辑和导出是对应的，用什么方式导出，就用什么方式导入，别搞混就行。
先讲最常用的“按需导入”——对应前面的单独导出或者打包导出。比如你要在另一个文件（order.ts）里用水果文件的苹果单价和算总价函数，就用import加大括号：
`typescript
// order.ts
import { applePrice, calculateTotal } from './fruit.js';
// 现在就能直接用了
console.log(苹果每斤${applePrice}元);
console.log(买3斤苹果要${calculateTotal(3)}元);
`
这里要注意，导入的文件后缀如果是.ts的话，在浏览器里跑的时候会有问题，所以一般编译后用.js，这是小细节，不用太纠结。
再讲默认导出的导入，因为导出的时候没名字，导入的时候可以自己取名字。比如导入前面的账单生成器，就不用加大括号，直接起名字就行：
`typescript
// order.ts
import createMyBill from './bill.js';
// 这里把默认导出的函数起名叫createMyBill，想叫billGenerator也行
console.log(createMyBill(['2斤苹果', '1斤香蕉']));
`
最后再提个小提醒：导入导出的路径要写对，就像你找邻居家，不能写“去我家隔壁”，得写“去我家左边第三家”，路径里的./代表当前文件夹，../代表上一级文件夹，写错了就找不到文件啦。