面试题：TypeScript模块导入导出的细节考查

Question

在TypeScript中，假设有一个模块`mathUtils.ts`，它导出了两个函数`add`和`subtract`。请在另一个模块`main.ts`中导入这两个函数并使用它们，同时解释`export`和`import`的不同语法形式（如命名导出、默认导出等）。

Answer 1

mathUtils.ts 代码

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

export function subtract(a: number, b: number): number {
    return a - b;
}

main.ts 代码

// 命名导入
import { add, subtract } from './mathUtils';

const resultAdd = add(5, 3);
const resultSubtract = subtract(5, 3);

console.log(`Addition result: ${resultAdd}`);
console.log(`Subtraction result: ${resultSubtract}`);

export 语法形式

• 命名导出：
  • 可以在声明时直接使用 export 关键字，如 export function add(...)。
  • 也可以在文件末尾使用 export { functionName1, functionName2 } 的形式将多个声明导出。
  • 命名导出允许多个导出，在导入时需要明确指定导入的名称。
• 默认导出：
  • 使用 export default 关键字，每个模块只能有一个默认导出。例如 export default function myFunction(...) 或 export default class MyClass {...}。
  • 导出的值可以是函数、类、对象等。

import 语法形式

• 命名导入：用于导入命名导出的内容，语法为 import { identifier1, identifier2 } from 'modulePath'，如 import { add, subtract } from './mathUtils'。
• 默认导入：用于导入默认导出的内容，语法为 import identifier from 'modulePath'。例如，如果 mathUtils.ts 有一个默认导出的函数 defaultFunction，则导入为 import defaultFunction from './mathUtils'。
• 混合导入：可以同时进行命名导入和默认导入，如 import defaultExport, { namedExport1, namedExport2 } from'modulePath'。