面试题：TypeScript模块化中如何处理模块间的依赖循环

Question

在TypeScript模块化开发里，假设我们有模块A和模块B，A依赖B中的某个函数，B又依赖A中的某个变量，这种循环依赖的情况应该如何处理？请描述可能的解决方案及原理，并给出简单代码示例。

Answer 1

解决方案及原理

1. 分离公共部分：将A和B相互依赖的部分提取到一个新的模块C中。这样A和B都依赖C，避免了直接的循环依赖。原理是通过打破A和B之间的直接依赖关系，将依赖转移到一个独立的模块，从而消除循环。
2. 延迟初始化：在模块中使用函数来延迟初始化依赖，而不是在模块顶层直接引用。当实际需要使用依赖时才去获取，这样可以避免模块加载时的循环依赖问题。原理是利用JavaScript的函数作用域和延迟执行机制，在模块初始化时不立即解析依赖，而是在调用相关函数时才去获取。

代码示例

1. 分离公共部分
   • 模块C（公共部分）：

// common.ts
export const sharedVariable = 'This is a shared variable';

• 模块A：

// moduleA.ts
import { sharedVariable } from './common';
export const aFunction = () => {
    console.log(`Using shared variable in A: ${sharedVariable}`);
};

• 模块B：

// moduleB.ts
import { sharedVariable } from './common';
export const bFunction = () => {
    console.log(`Using shared variable in B: ${sharedVariable}`);
};

2. 延迟初始化
   • 模块A：

// moduleA.ts
let bFunction: () => void;
export const aVariable = 'This is a variable in A';
export const setBFunction = (func: () => void) => {
    bFunction = func;
};
export const aFunction = () => {
    if (bFunction) {
        bFunction();
    }
};

• 模块B：

// moduleB.ts
import { aVariable, setBFunction } from './moduleA';
export const bFunction = () => {
    console.log(`Using variable from A in B: ${aVariable}`);
};
setBFunction(bFunction);