由于文件夹结构导致意外的 TSC 编译行为

Question

我对这里的一些事情感到头疼。 TSC 编译器显示出我无法解释的行为，这使我无法按照自己想要的方式组织代码。

首先使用文件夹结构的工作示例：

MyProject/    
    src/
      folder/
        nested-folder/
          ABC.ts
          index.ts
        index.ts
      example.ts

MyProject/src/folder/nested-folder/ABC.ts

export abstract class A {

    protected myInnerFunc(paramsObject: object): void {
        console.log(paramsObject instanceof C);
    }
}

export interface BProps {
    readonly myC?: C;
}

export interface B extends BProps {};

export class B extends A {

    constructor(props: BProps) {
        super()
        Object.assign(this, props);
    }

    myFunc(): void {
        this.myInnerFunc(this.myC)
    }

}

export interface CProps {
    readonly name: string;
}

export interface C extends CProps {};

export class C extends A{

    constructor(props: CProps) {
        super()
        Object.assign(this, props);
    }

}

MyProject/src/folder/nested-folder/index.ts

export * from './ABC';

MyProject/src/folder/index.ts

export * from './nested-folder';

MyProject/src/example.ts

import { B, C } from "./folder";

const c = new C({name: "MY_NAME"});

const user = new B({
    myC: c
});

user.myFunc();

运行上述输出会将

true

记录到控制台。

接下来是一个使用文件夹结构的不起作用的示例：

MyProject/
    src/
      folder/
        nested-folder/
          A.ts
          B.ts
          C.ts
          index.ts
        index.ts
      example.ts

MyProject/src/folder/nested-folder/A.ts

import { C } from "./C";

export abstract class A {

    protected myInnerFunc(paramsObject: object): void {
        console.log(paramsObject instanceof C);
    }
}

MyProject/src/folder/nested-folder/B.ts

import { A } from "./A"; import { C } from "./C";

export interface BProps {
    readonly myC?: C; }

export interface B extends BProps {};

export class B extends A {

    constructor(props: BProps) {
        super()
        Object.assign(this, props);
    }

    myFunc(): void {
        this.myInnerFunc(this.myC)
    }

}

MyProject/src/folder/nested-folder/C.ts

import { A } from "./A";

export interface CProps {
    readonly name: string;
}

export interface C extends CProps {};

export class C extends A{

    constructor(props: CProps) {
        super()
        Object.assign(this, props);
    }

}

MyProject/src/folder/nested-folder/index.ts

export * from './A';
export * from './B';
export * from './C';

MyProject/src/folder/index.ts

export * from './nested-folder';

MyProject/src/example.ts

import { B } from "./folder/nested-folder/B";
import { C } from "./folder/nested-folder/C";

const c = new C({name: "MY_NAME"});

const user = new B({
    myC: c
});

user.myFunc();

运行结果报错：

/<SOME_PATH>/MyProject/dist/folder/nested-folder/C.js:6
class C extends A_1.A {
                    ^

TypeError: Class extends value undefined is not a constructor or null
    at Object.<anonymous> (/<SOME_PATH>/MyProject/dist/folder/nested-folder/C.js:6:21)
    at Module._compile (node:internal/modules/cjs/loader:1267:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1321:10)
    at Module.load (node:internal/modules/cjs/loader:1125:32)
    at Module._load (node:internal/modules/cjs/loader:965:12)
    at Module.require (node:internal/modules/cjs/loader:1149:19)
    at require (node:internal/modules/helpers:121:18)
    at Object.<anonymous> (/<SOME_PATH>/MyProject/dist/folder/nested-folder/A.js:4:13)
    at Module._compile (node:internal/modules/cjs/loader:1267:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1321:10)

Node.js v20.1.0

我不知道如何解释这种编译器行为。造成这种情况的原因是什么？我将如何以一种不强迫我将所有内容都放在一个文件中的方式组织该项目中的接口和类？

Answer 1

您的圆度为 A <- C <- A.

因此，编译器无法解析

C.ts

中 A 的导入，这意味着在运行时评估时 A 将是

undefined

。

您在第一个示例中没有这个问题，因为没有

import

循环性。