typescript 错误 TS2449 : Class 'x' used before its declaration

Question

我不明白 tsc关于 <reference> 的编译过程并将命名空间的类拆分到多个文件中。我正在使用模式:

src/base.ts

namespace MyNameSpace {
  export class Base {
     /** constructor, etc. */
  }
}

src/subclass.ts

/// <reference path="./base.ts" />

namespace MyNameSpace {
  export class Subclass {
     /** constructor, etc. */
  }
}

这个简单的例子有效。但是当我在更多文件上使用该模式时，我会定期收到错误 TypeScript error TS2449: Class 'x' used before its declaration. .

我们是否回到手动管理申报顺序，例如 .c/.h文件？如果是这样，哪些工具将有助于回溯引用以查找错误？

我的目标是拥有一组可编译成单个文件的可管理文件 .js和 .d.ts (供另一个 TypeScript 库使用)。对于这种情况是否有更好的解决方案？尝试使用 Webpack 和 import 的变体让我失望了。

如果重要的话，我还使用了嵌套的命名空间，其中的成员在子目录中定义。我总是使用相对 reference路径。

这与 typescript Base type 'xxxx' is referenced before its declaration 非常相似，它处理跨多个文件拆分的模块。

Answer 1

主要术语提醒

命名空间不优于模块。这是非常重要的一点。让我们深入了解历史...

命名空间过去是这样声明的:

module MyNamespace {

}

但是他们现在是这样声明的:

namespace MyNamespace {

}

声明命名空间时，namespace 关键字优先于旧的 module 关键字。

module 关键字被替换为 namespace 的原因是人们将它们与“模块”混淆了。你可以看到困惑可能来自哪里!现在实际 modules (i.e. files that export or import something) are actually a bit better than namespaces ，这就是为什么到目前为止我用了整个答案来涵盖所有这些内容。

使用模块

考虑到这一点，您可以考虑使用模块。每个模块都为您提供一个命名上下文，并将内容排除在全局范围之外。您可以导入和导出，一切都应该按预期工作(如果您愿意，您仍然可以捆绑它)。

src/base.ts

export class Base {

}

src/subclass.ts

import * as Example from './subclass.ts';

export class Base extends Example.Base {

}

命名空间合并

如果你想坚持使用 namespace ，你必须尊重你放置在 namespace 中的所有内容(即使该 namespace 分布在多个文件中)都有助于单一命名上下文......所以你必须命名子类不同。

src/base.ts

namespace MyNameSpace {
  export class Base {
     /** constructor, etc. */
  }
}

src/subclass.ts

/// <reference path="./base.ts" />

namespace MyNameSpace {
  export class Sub extends Base {
     /** constructor, etc. */
  }
}

所以最终，您可以选择模块(适当的外部模块)，其中每个文件都有自己的命名上下文，并且您可以轻松避免命名冲突 - 或者 namsepaces，您需要知道每个命名空间都是一个命名上下文.

细则

在许多示例中，我在子类中继承了 Base 以供说明。你的问题并没有完全做到这一点，但我想说明这个概念。该问题在命名空间中有两个同名的类，这是重名冲突。