TypeScript中默认导入与非默认导入的区别及优势疑问

我太懂这种摸不着头脑的感觉了——TypeScript里的default关键字乍一看好像只是导入导出写法不同，但背后其实藏着不少场景化的设计逻辑。咱们从你提到的类的场景入手，一步步把用和不用的优势掰扯清楚。

一、类里的default：导入导出的差异与适用场景 #

先直接对比两种写法，你就能直观感受到区别：

1. 不用default（命名导出） #

// myStuff.ts
export class MyStuff {
  // 类的逻辑代码
}

导入的时候必须带花括号：

import { MyStuff } from './myStuff';

这么写的好处：

• 适合一个文件里要导出多个类/模块的情况，比如一个工具文件里同时有Utils、Validator、Formatter，命名导出能清晰区分每个成员
• 导入时明确知道自己拿的是什么，遇到重名还能轻松改：import { MyStuff as MyCustomStuff } from './myStuff'
• 编辑器的智能提示更精准，因为每个导出都是有明确名字的，不会混

2. 用default（默认导出） #

// myStuff.ts
export default class MyStuff {
  // 类的逻辑代码
}

导入的时候不用花括号，甚至还能随便改名字：

import MyStuff from './myStuff';
// 改成啥都行
import MyCustomStuff from './myStuff';

这么写的好处：

• 适合一个文件核心只有一个类的场景，比如React组件文件Button.tsx，核心就是Button类，默认导出让导入更简洁，不用多敲那对花括号
• 导入时灵活度高，比如你导入多个同类型组件时，能直接用语义化的名字区分：import PrimaryButton from './PrimaryButton'、import SecondaryButton from './SecondaryButton'
• 能无缝对接CommonJS模块的默认导出（不少npm包是用CommonJS写的，TypeScript的默认导出能直接兼容）

二、函数和变量里的default：逻辑是一样的 #

这个逻辑完全可以延伸到函数和变量上，咱们快速过一遍：

函数场景 #

// 命名导出函数
export function add(a: number, b: number): number {
  return a + b;
}

// 默认导出函数
export default function multiply(a: number, b: number): number {
  return a * b;
}

导入时：

import { add } from './math';
import multiply from './math';
// 甚至直接改名成times也没问题
import times from './math';

• 命名导出适合工具函数集合，一个文件里多个小函数，每个都有明确用途
• 默认导出适合一个文件里的核心函数，比如专门处理日期格式化的文件，核心就是formatDate函数，默认导出用起来更直观

变量场景 #

// 命名导出变量
export const PI = 3.14159;

// 默认导出变量
export default const MAX_SIZE = 100;

导入时：

import { PI } from './constants';
import maxSize from './constants'; // 自定义名字更贴合你的代码语境

• 命名导出适合一组相关常量，比如PI、E、GOLDEN_RATIO放在一个文件里，导入时按需挑着用
• 默认导出适合单个核心常量，比如一个配置文件里只有APP_CONFIG这个核心对象，默认导出让导入更省心

三、总结：什么时候用default？什么时候不用？ #

给你个简单的判断标准：

• 用default的情况：

  • 文件的核心逻辑只有一个（单组件、单核心函数/常量）
  • 希望导入时能灵活自定义名称
  • 需要兼容CommonJS模块的默认导出

• 不用default的情况：

  • 文件里有多个导出成员（工具类、工具函数集合）
  • 希望导入时明确知道每个成员的名称，避免歧义
  • 团队规范要求统一用命名导出（有些团队为了代码一致性，会禁止默认导出）

内容的提问来源于stack exchange，提问作者Socrates