面试题：TypeScript中动态模块加载的基础实现

Question

在TypeScript项目中，如何使用`import()`语法实现动态模块加载？请给出一个简单示例，并解释该语法在动态加载模块时的工作原理。

Answer 1

示例

假设我们有一个简单的TypeScript项目，有两个模块 module1.ts 和 main.ts。

module1.ts 内容如下：

export const message = 'This is module1';

main.ts 中使用 import() 动态加载 module1.ts：

async function loadModule() {
    const module1 = await import('./module1');
    console.log(module1.message);
}

loadModule();

工作原理

1. 语法解析：import() 是一个函数，它接受一个参数，这个参数是要导入模块的路径。它返回一个 Promise。
2. 动态加载时机：与传统的 import 语句在编译时就确定依赖不同，import() 是在运行时动态加载模块。这意味着只有当代码执行到 import() 这一行时，才会去加载指定的模块。
3. 异步加载：由于返回的是 Promise，可以使用 await（在 async 函数中） 或者 .then() 来处理加载完成后的操作。这使得模块加载不会阻塞主线程，提高了应用程序的性能和响应性。当模块加载完成后，Promise 被 resolve，返回一个包含模块导出内容的对象，就像示例中通过 module1.message 访问到 module1.ts 中导出的 message 变量。