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>

我将如何做到这一点，最终的目标是能够利用打字稿模块进行开发，但提供一个可以从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，他告诉我module现在被命名为namespace s。

使用Javascript中的Typescript模块

1 个答案: