小记 TypeScript 中的循环引用问题

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

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

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

代码语言：javascript复制

export class A {
    // methods here
}

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

代码语言：javascript复制

import { A } from "./A.ts"

class B {
    // use A here
}

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

代码语言：javascript复制

import { B } from "./B.ts"

export class A {
    // use B here
}

代码语言：javascript复制

import { A } from "./A.ts"

export class B {
    // use A here
}

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

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

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

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

代码语言：javascript复制

import { C } from "./C.ts"

export class A {
    // use C here
}

代码语言：javascript复制

import { A } from "./A.ts"

export class B extends A {
    // methods here
}

代码语言：javascript复制

import { B } from "./B.ts"

export class C extends B {
    // methods here
}

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

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

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

代码语言：javascript复制

export class A {
    // use C here
}

// put import after export
import { C } from "./C.ts"

代码语言：javascript复制

import { A } from "./A.ts"

export class B extends A {
    // methods here
}

代码语言：javascript复制

import { B } from "./B.ts"

export class C extends B {
    // methods here
}

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

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

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

0 人点赞