小记 TypeScript 中的循环引用问题

深碍√TFBOYSˉ_ 2022-12-13 04:12 297阅读 0赞

> 随着项目规模的不断增长,循环引用问题似乎总是不可避免,本文就 TypeScript 中可能出现的循环引用问题做了一些简单记录~

平时编写 TypeScript 代码时,一般都倾向于使用[模块(Module)][Module],通过结合使用 import 和 export 我们便可以方便的进行模块的导入和导出.

举个简单的例子,假设我们有以下的 TypeScript 代码文件(A.ts):

export class A { 
        // methods here
    }

可以看到,上述代码使用 export 导出了类型 A,如果我们需要在另外的 TypeScript 代码文件(B.ts)中使用类型 A,我们可以直接使用 import :

import {  A } from "./A.ts"
    
    class B { 
        // use A here
    }

接着我们让代码变的复杂一些,假设现在类型 A 也要使用类型 B 了,那么相关的代码可能会变成这样:

import {  B } from "./B.ts"
    
    export class A { 
        // use B here
    }

import {  A } from "./A.ts"
    
    export class B { 
        // use A here
    }

此时,类型 A 与 类型 B 便产生了循环引用,一般来讲是应该尽量避免的,但是在较大型的项目中往往又很难规避,所以我们需要一种可以处理循环引用问题的方法([之前][Link 1]关于这个话题自己也写过一篇博文),而实际上,TypeScript 中的 import 和 export 是可以处理循环引用的:

当 import 遇到**导入完毕**或者说**正在导入**的模块(文件)时,是直接返回导入结果的(尽管这个结果可能是不完整的),而不是递归的进行模块的导入操作,还是拿上面的代码举例,假设我们首先导入 A 模块:

*  A 模块尝试导入 B 模块
 *  由于 B 模块尚未导入,程序开始导入 B 模块
 *  B 模块尝试导入 A 模块
 *  由于 A 模块正在导入,所以程序直接返回当前导入结果(尽管当前结果是不完整的)
 *  将类型 B 加入到 B 模块的导出数据中(export class B)
 *  B 模块导入完成,继续 A 模块的导入
 *  将类型 A 加入到 A 模块的导出数据中(export class A)
 *  A 模块导入完成

值得注意的是,上述的这种循环引用处理方式是不完备的,该方式并不能正确处理更复杂一些的循环引用情况(主要是在一些需要及时访问模块导出数据的情况下,譬如类继承(extends),静态引用等等)

考虑下面的循环引用情况:

import {  C } from "./C.ts"
    
    export class A { 
        // use C here
    }

import {  A } from "./A.ts"
    
    export class B extends A { 
        // methods here
    }

import {  B } from "./B.ts"
    
    export class C extends B { 
        // methods here
    }

假设我们首先导入 A.ts,我们来分析下导入流程:

*  A 模块尝试导入 C 模块
 *  由于 C 模块尚未导入,所以我们开始导入 C 模块
 *  C 模块尝试导入 B 模块
 *  由于 B 模块尚未导入,所以我们开始导入 B 模块
 *  B 模块尝试导入 A 模块
 *  由于 A 模块正在导入,所以程序直接返回当前导入结果
 *  B 模块继承 A 模块,尝试在当前(A 模块)导入结果中访问类型 A 的定义
 *  但是当前(A 模块)导入结果中并没有类型 A 的定义(因为当前 A 模块的导入还没有进行到 export class A)
 *  Ops,导入出错(找不到类型 A 的定义) …

对于上面这种情况,其实有一个技巧可以解决上面的问题:**在不需要及时访问模块导出数据的情况下,我们可以将模块的导入操作后置**.

就上面的例子来讲,我们可以这么修改代码:

export class A { 
        // use C here
    }
    
    // put import after export
    import {  C } from "./C.ts"

import {  A } from "./A.ts"
    
    export class B extends A { 
        // methods here
    }

import {  B } from "./B.ts"
    
    export class C extends B { 
        // methods here
    }

我们再来分析下上面代码的导入流程(仍然假设首先导入 A.ts):

*  A 模块将类型 A 加入到 A 模块的导出数据中(export class A)
 *  A 模块尝试导入 C 模块
 *  由于 C 模块尚未导入,所以我们开始导入 C 模块
 *  C 模块尝试导入 B 模块
 *  由于 B 模块尚未导入,所以我们开始导入 B 模块
 *  B 模块尝试导入 A 模块
 *  由于 A 模块正在导入,所以程序直接返回当前导入结果
 *  类型 B 继承 类型 A ,尝试在当前(A 模块)导入结果中访问类型 A 的定义
 *  当前(A 模块)导入结果中存在类型 A 的定义, 类型 B 可以正常定义导出
 *  B 模块将类型 B 加入到 B 模块的导出数据中(export class B)
 *  B 模块导入完成,继续 C 模块的导入
 *  类型 C 继承 类型 B,尝试在当前(B 模块)导入结果中访问类型 B 的定义
 *  当前(B 模块)导入结果中存在类型 B 的定义, 类型 C 可以正常定义导出
 *  C 模块导入完成, 继续 A 模块的导入
 *  A 模块导入完成

**但是如果我们尝试首先导入 B 模块(B.ts)的话,仍然会遇到导入出错的问题**:

*  B 模块尝试导入 A 模块
 *  由于 A 模块尚未导入,所以我们开始导入 A 模块
 *  A 模块尝试导入 C 模块
 *  由于 C 模块尚未导入,所以我们开始导入 C 模块
 *  C 模块尝试导入 B 模块
 *  由于 B 模块正在导入,所以程序直接返回当前导入结果
 *  类型 C 继承 类型 B,尝试在当前(B 模块)导入结果中访问类型 B 的定义
 *  但是当前(B 模块)导入结果中并没有类型 B 的定义(因为当前 B 模块的导入还没有进行到 export class B)
 *  Ops,导入出错(找不到类型 B 的定义) …

这种情况下,我们已经不能通过后置 import 来解决问题了(因为类型 B 和 类型 C 的定义导出都需要及时访问导入模块的导出数据),我们只能通过改变模块的导入顺序来规避导入出错的问题 …

[Module]: https://www.tslang.cn/docs/handbook/modules.html
[Link 1]: https://blog.csdn.net/tkokof1/article/details/102815430