面试题：TypeScript中动态导入模块的基本语法是什么

Question

请写出在TypeScript中使用动态导入模块的基本语法，并说明与静态导入有何不同。

Answer 1

动态导入模块基本语法

在TypeScript中，动态导入使用import()语法，它返回一个Promise。例如：

// 动态导入一个模块
import('./modulePath').then((module) => {
    // 使用导入的模块
    module.doSomething();
}).catch((error) => {
    console.error('导入模块出错:', error);
});

与静态导入的不同

1. 导入时机
   • 静态导入：在编译时就确定导入关系，模块在脚本加载时就被加载和解析。这意味着如果有多个静态导入，它们会按顺序依次加载。
   • 动态导入：在运行时才进行导入操作，只有当代码执行到import()语句时，才会去加载对应的模块。这提供了更大的灵活性，可以根据不同的运行时条件来决定是否导入以及导入哪个模块。
2. 语法形式
   • 静态导入：使用import关键字，后跟模块路径、命名空间、解构等方式来指定导入内容。例如import { functionName } from './module';
   • 动态导入：使用import()函数，其参数为模块路径字符串，返回一个Promise，通过.then()处理成功导入的模块，.catch()处理导入失败的情况。
3. 模块使用场景
   • 静态导入：适用于在整个应用生命周期中都需要使用的模块，这些模块是应用正常运行的基础部分。
   • 动态导入：适用于某些模块可能不是每次都需要加载的场景，比如按需加载（例如懒加载路由组件），可以优化应用的初始加载性能，减少初始加载的代码量。