面试题：TypeScript模块系统中默认导出和命名导出的区别

Question

请阐述在TypeScript模块系统里，默认导出（default export）和命名导出（named export）在语法、使用场景以及导入方式上有哪些不同？

Answer 1

语法

• 默认导出：在一个模块中，只能有一个默认导出。语法格式为export default expression;，这里expression可以是变量、函数、类等。例如：

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

// 导出一个类
class Person {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
}
export default Person;

• 命名导出：一个模块可以有多个命名导出。语法格式为export let/const/function/class identifier; 。例如：

// 导出变量
export const PI = 3.14159;
// 导出函数
export function square(x: number) {
    return x * x;
}
// 导出类
export class Animal {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
}

使用场景

• 默认导出：适用于模块只有一个主要的“事物”要导出的情况，比如一个模块只提供一个函数、一个类或一个单例对象。例如一个工具模块只提供一个核心的格式化函数，就可以使用默认导出。
• 命名导出：当模块需要导出多个相关的功能、值或类型时使用。比如一个数学工具模块，可能导出add、subtract、multiply等多个函数，这种情况下使用命名导出更合适。

导入方式

• 默认导出：导入时可以使用任意的标识符。语法为import identifier from "module - specifier";。例如：

// 导入默认导出的函数
import add from './mathUtils';
console.log(add(2, 3)); 

// 导入默认导出的类
import Person from './Person';
const p = new Person('John');

• 命名导出：导入时必须使用导出时的标识符（或使用别名）。语法为import { identifier1, identifier2 } from "module - specifier";。例如：

// 导入命名导出的变量和函数
import { PI, square } from './mathUtils';
console.log(PI); 
console.log(square(5)); 

// 使用别名导入
import { Animal as MyAnimal } from './Animal';
const animal = new MyAnimal('Dog');