在 Javascript 中使用 Typescript 模块

Posted 2023-03-13

【中文标题】在 Javascript 中使用 Typescript 模块

【英文标题】：Using Typescript Modules from Javascript

【发布时间】：2018-05-28 15:11:00

【问题描述】：

我想使用 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 使用的库。

【问题讨论】：

您可以考虑避免使用自 es6 brings modules natively 以来的任何打字稿自定义模块或命名空间。只要符合 es 标准即可。

【参考方案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。

【讨论】：

当然。只需导入您需要的类，然后结合使用export const A = A; 和export type A = A; 即可拥有功能齐全的重新导出类。我已经更新了我的答案。

@GhabrielNunes 据我所知，这并不完全正确。内部模块现在是命名空间，而外部模块只是模块。至少 TypeScript 官方网站是这么说的。

external modules are just modules 意味着您只需 export 直接使用您想要的任何类/变量，而不是将它们包装在 namespace 中。 module 关键字本身完全等同于namespace。见here

这不是 TypeScript，而是 WebPack 问题。您可以配置 WebPack 以使您的代码可用作库，如下所述：***.com/questions/34357489/…

将libraryTarget: 'var' 和library: 'LettersLibrary 添加到输出允许我访问LettersLibrary' from javascript, but A, B, and C` 仍然未定义。编辑：它有效，我只需要执行 LettersLibrary.LettersLibrary.A，我将删除根据此答案创建的命名空间，希望它有效