在 Javascript 中使用 Typescript 模块

Question

我想使用 Typescript 模块创建一个项目，但允许它从 vanilla javascript 中使用。

假设它包含 3 个模块，每个模块包含一个类，A、B 和 C。

即

A.ts：

export default class A {
    /* things */
}

B.ts：

export default class B {
    /* things */
}

C.ts：

export default class C {
    /* things */
}

所有这些都使用 webpack 构建并捆绑到一个 dist.js 文件中。我希望图书馆的用户能够做类似的事情

<script src="dist.js"></script>
<script>
    var foo = new LettersLibrary.A();
</script>

我将如何去做，最终目标是能够利用 typescript 模块进行开发，但提供一个可从 vanilla js 使用的库。

Answer 1

为此使用 TypeScript 命名空间。您可以在其中声明您的类，然后从模块内部导出它们。然后，您的用户将能够按照您的意愿使用它。

https://www.typescriptlang.org/docs/handbook/namespaces.html

例子：

namespace LettersLibrary {
  export class A {
    hello = "Hello World";
  }

  export class B {
    myBool = false;
  }

  export class C {
    someInt = 42;
  }
}

在 JavaScript 中，你会这样做：

const instance = new LettersLibrary.A ();
console.log (instance.hello); // "Hello World"

如果你需要从其他文件重新导出类，只需将导入的类导出为 const 和类型（对于 TypeScript 开发很有用，否则你将无法使用模块中的类型):

import importA from "...";
import importB from "...";
import importC from "...";

namespace LettersLibrary {
    export const A = importA;
    export type A = importA;

    // Same for B and C
}

使用 WebPack 时，您必须将其导出为库。为此，您可以将libraryExport 配置与library 和libraryTarget 选项一起使用。见：https://webpack.js.org/configuration/output/#output-libraryexport

感谢@Ghabriel Nunes，他告诉我modules 现在改名为namespaces。