面试题：TypeScript模块的循环依赖问题及解决方案

运行时错误：当模块间存在循环依赖时，在运行时可能会出现变量未定义或值不正确的情况。因为在循环依赖的模块相互导入时，可能会导致部分模块代码未完全执行完毕就开始使用其中的变量或函数，从而引发错误。
逻辑混乱：代码逻辑变得复杂且难以理解和维护。开发人员需要花费更多精力去梳理模块间的依赖关系，排查问题时也会更加困难。

假设有两个模块 a.ts 和 b.ts： a.ts

import { bFunction } from './b';

export const aFunction = () => {
    console.log('aFunction');
    bFunction();
};

b.ts

import { aFunction } from './a';

export const bFunction = () => {
    console.log('bFunction');
    aFunction();
};

在上述代码中，a.ts 依赖 b.ts，b.ts 又依赖 a.ts，形成循环依赖。当尝试运行 aFunction 或 bFunction 时，就会导致运行时错误，因为在调用 bFunction 时，aFunction 可能还未完全初始化，反之亦然。

重构模块结构：
- 分析模块间的依赖关系，将相互依赖的部分提取到一个独立的模块中。例如，上述例子中，可以创建一个新的模块 common.ts，将 aFunction 和 bFunction 共同依赖的逻辑提取到 common.ts 中。
- common.ts

export const commonLogic = () => {
    console.log('Common logic');
};

- **a.ts**

import { commonLogic } from './common';

export const aFunction = () => {
    console.log('aFunction');
    commonLogic();
};

- **b.ts**

import { commonLogic } from './common';

export const bFunction = () => {
    console.log('bFunction');
    commonLogic();
};

使用延迟加载：
- 在依赖的模块中，不直接导入依赖模块，而是在需要使用时动态导入。在 TypeScript 中，可以使用 import() 语法进行动态导入。
- a.ts

export const aFunction = async () => {
    console.log('aFunction');
    const { bFunction } = await import('./b');
    bFunction();
};

- **b.ts**

export const bFunction = async () => {
    console.log('bFunction');
    const { aFunction } = await import('./a');
    aFunction();
};

这样通过动态导入，避免了模块加载时的循环依赖问题。不过需要注意的是，这种方式会引入异步操作，在代码编写和错误处理上需要更加小心。

星途面试题库