JavascriptのTypescriptモジュールを使用する

Question

Typescriptモジュールを使用してプロジェクトを作成したいと思いますが、vanilla javascriptからプロジェクトを使用することができます。

それぞれ1つのクラス（A、B、およびC）を含む3つのモジュールが含まれているとします。

すなわち

A.ts：

export default class A { 
    /* things */ 
} 

B.ts：

export default class B { 
    /* things */ 
} 

C.ts：

これらのすべてはに組み込まれており、同梱されている

export default class C { 
    /* things */ 
} 

1つのファイルdist.js bpack。 I図書館の利用者は、どのように私はこれをやって行くだろう

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

に

を似た何かをできるようにしたいと思い、最終的な目標はtypescriptですモジュールを利用して開発することができることですが、ライブラリを提供バニラjsから使用可能です。

Answer 1

これにはTypeScript名前空間を使用します。クラスをクラス内で宣言し、モジュール内からクラスをエクスポートすることができます。あなたのユーザーはあなたが好きなようにそれを使用することができます。

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

例：JavaScriptで

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

    export class B { 
    myBool = false; 
    } 

    export class C { 
    someInt = 42; 
    } 
} 

、あなたはその後、どうなる：

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を使用する場合は、ライブラリとしてエクスポートする必要があります。このため、とlibraryTargetのオプションと一緒にlibraryExportの設定を使用できます。参照：https://webpack.js.org/configuration/output/#output-libraryexport

@Ghabriel Nunesのおかげで、moduleの名前はnamespaceとなりました。