代码之家 › 专栏 › 技术社区 › Mohsin Amjad

Javascript/Typescript中类的交叉引用是如何工作的?

inversifyjs nrwl babeljs typescript javascript

Mohsin Amjad · 技术社区 · 5 年前

即使在一个文件中定义了类,我也面临交叉引用类的问题。

// classes.ts
export class A extends BaseModel implements IA {
  static readonly modelName = 'A';
  b?: B;
  symbol?: string;

  constructor(object: IA | A = {} as IA) {
    super(object);
    const { symbol, b } = object as A;
    this.symbol = symbol;
    this.b = b;
  }
}


export class B extends BaseModel implements IB {
  static readonly modelName = 'B';
  a?: A[];
  constructor(object: IB | B = {} as IB) {
    super(object);
    const { a } = object as B;
    this.a = a as A[];
  }
}

错误是这样的

Uncaught ReferenceError: Cannot access 'B' before initialization
    at Module.../../../../libs/platform/src/data/models/common/uom.ts (uom.ts:13)
    at __webpack_require__ (bootstrap:84)
    at Module.../../../../libs/platform/src/data/models/common/common-models.ts (main.js:27248)
    at __webpack_require__ (bootstrap:84)
    at Module.../../../../libs/platform/src/data/models/common/index.ts (index.ts:1)
    at __webpack_require__ (bootstrap:84)
    at Module.../../../../libs/platform/src/data/models/index.ts (index.ts:1)
    at __webpack_require__ (bootstrap:84)
    at Module.../../../../libs/platform/src/data/index.ts (index.ts:1)
    at __webpack_require__ (bootstrap:84)
    at Module.../../../../libs/platform/src/index.ts (index.ts:1)
    at __webpack_require__ (bootstrap:84)
    at Module.../../../../libs/platform-frontend/src/core/client/frontend-client.ts (index.ts:1)
    at __webpack_require__ (bootstrap:84)
    at Module.../../../../libs/platform-frontend/src/core/client/index.ts (index.ts:1)
    at __webpack_require__ (bootstrap:84)

这里是babel和Tconfig文件

// babel.config.json
{
  "presets": [
    "@nrwl/web/babel",
    "@nrwl/react/babel"
  ],
  "plugins": [
    "babel-plugin-transform-typescript-metadata"
  ],
  "babelrcRoots": [
    "*"
  ]
}

//tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "downlevelIteration": true,
    "types": ["jest", "node", "cypress","reflect-metadata"],
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "rootDir": ".",
    "sourceMap": false,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "importHelpers": false,
    "target": "es5",
    "allowJs": true,
    "typeRoots": ["node_modules/@types"],
    "lib": [
      "es2017",
      "es6",
      "dom",
      "es2016",
      "esnext.asynciterable",
      "es5",
      "scripthost",
      "es2015.promise",
      "es2015.collection"
    ],
    "baseUrl": ".",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    ...
    ...
}

令人困惑的是,它可以根据babel配置正常工作我试图在我的代码库中添加inversify,因为我必须添加它 babel-plugin-transform-typescript-metadata 在babel配置中。在这样做之后,我得到了每个类的错误,这些类在添加babel插件之前工作得很好

是什么导致了这些问题?
它如何工作取决于巴贝尔配置?
我能做些什么来修复它,因为它甚至不在单独的文件中,这会导致循环依赖

0 回复 | 直到 5 年前

Mohsin Amjad 5 年前

显然,这是与“babel插件转换typescript元数据”相关的问题,在用“babel插件参数装饰器”替换该插件后,与循环依赖性相关的问题自动得到解决。