面试题：TypeScript中命名导出与默认导出的区别

Question

请详细阐述TypeScript中命名导出（Named Export）与默认导出（Default Export）在语法、使用场景以及导入方式上有哪些区别，并各举一个简单示例。

Answer 1

语法区别

1. 命名导出：可以有多个命名导出，使用export关键字直接声明要导出的变量、函数或类型。

// 命名导出变量
export const name = 'John';
// 命名导出函数
export function greet() {
    return 'Hello!';
}

2. 默认导出：一个模块只能有一个默认导出，使用export default关键字。

// 默认导出函数
export default function () {
    return 'This is a default export';
}

使用场景区别

1. 命名导出：适用于模块需要导出多个相关的功能或值的场景，比如一个工具模块导出多个工具函数。例如一个数学工具模块，可能导出add、subtract、multiply等多个函数。
2. 默认导出：适用于模块主要导出一个“主”内容的场景，比如一个组件模块，通常默认导出该组件。例如一个Button组件模块，默认导出Button组件本身。

导入方式区别

1. 命名导出：导入时需要使用花括号指定要导入的名称，名称必须与导出时一致。

import { name, greet } from './module';
console.log(name);
console.log(greet());

2. 默认导出：导入时不需要花括号，可自定义导入名称。

import customName from './module';
console.log(customName());