使用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 */
}

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

<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 和type(对于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现在名为namespaces.