Here is the error stack: TypeError: XXX_1.Foo is not a constructor, as runtime (compiles fine)

Question

我正在用 TypeScript 编写一个 VS 代码扩展，我正在尝试导出一个 class 以便在其他 TS 文件中使用。我已经能够很好地导出函数和接口，但是当我尝试将 class 导出到另一个 TS 文件时，它因错误而中断：

Here is the error stack:  TypeError: extension_1.Foo is not a constructor

class 是 extension.js 中的 Foo。

值得注意的是，这一切都可以正常编译，但我在运行时遇到了这个错误。

我的class很简单：

export class Foo {
    constructor() {}
    public getValues(keys: string[] | undefined): string[] { return []; }
}

然后我像往常一样导入它：

import { Foo } from "../extension";

并实例化为

let foo = new Foo();

我的tsconfig.json长得像

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "outDir": "out",
        "sourceMap": true,
        "strict": true,
        "rootDir": "src",
    },
    "exclude": [
        "node_modules",
        ".vscode-test"
    ]
}

我正在使用带有 ts-loader 的 webpack，以及 devDependencies：

 "devDependencies": {
        "@types/node": "^10.12.18",
        "@types/vscode": "^1.32.0",
        "ts-loader": "^6.0.4",
        "tslint": "^5.16.0",
        "typescript": "^3.5.1",
        "webpack": "^4.35.2",
        "webpack-cli": "^3.3.5",
        "vscode": "^1.1.34"
    }

我很纳闷这是怎么回事！

Answer 1

看来我的问题是循环依赖！

我的 shared-data.ts 的简化版本如下所示：

import { SHARED_DATA_1 } from './shared-data-1.ts'

export class Foo {
   constructor(..) { };
   getValues(): string[] { ... };
}

export const SHARED_OBJ = { 
  key0: { 
     data1: 'hello world',
     data2: new Foo(..)
  },
  key1: SHARED_DATA_1,
  key2: SHARED_DATA_2
}

shared-data-1.ts 看起来像：

import { Foo } from './shared-data.ts'
export const SHARED_DATA_1 = {
   data-1: new Foo()
}

一旦我将 Foo 移出到它自己的文件 ./Foo.ts 中，并将 shared-data.ts 和 shared-data-1.ts 更新为 import { Foo } from './Foo.ts'，一切正常。

我的实际依赖链有点复杂，但这是一个简化并解释了问题的关键。

Here is the error stack: TypeError: XXX_1.Foo is not a constructor, as runtime (compiles fine)

Here is the error stack: TypeError: XXX_1.Foo is not a constructor, as runtime (compiles fine)

typescript

webpack

vscode-extensions

commonjs