プレーンJavaScriptで使用できるTypeScriptでグローバル名前空間/クラスを作成するにはどうすればよいですか？

Question

My TypeScriptとプレーンJavaScriptコードは、名前空間といくつかのデータを共有する必要があります。 TypeScriptは名前空間を "準備"し、外部JSはデータを提供し、TypeScriptはそれを処理します。

コンテキストはAngular 2アプリケーションです。そのJavaScriptを使用して

1. 角度2アプリは動的に外部ソース（JSONPスタイル）からロードされたJavaScriptファイル
2. 外部のカスタムを開始
3. 角度2アプリが生成されたデータにさらに処理を行います。ロード順序があります外部JavaScriptファイル内

現在ロードされてJSファイルで、私はこのような何かをやっている：

if (typeof Blog === 'undefined') 
{ 
    Blog = { 
     Posts: [] 
    } 
} 
// ... 
Blog.Posts.push(post); 

このJavaScriptファイルが動的にロードされ、値がこのようにアクセス私の角度2のアプリで

：

declare var Blog: any; 
... 
let firstPost = Blog.Posts[0]; 

これは動作しますが、私は外部JSで配置されたデータにアクセスすることができます。

JavaScriptの部分をできるだけ小さくしたいと思います。だから、私はのBlogとPostsの宣言をタイプスクリプトに移して、強く型付けされた方法でそれを使用できるようにしたいと思っています。

だから、私はJavaScriptを有効にしてように見えた希望：

// ... 
Blog.Posts.push(post); 

はBlogの行方不明宣言に注意してください。私はタイプスクリプトでこれを試しました：

declare var Blog: BlogClass; // <- this is probably wrong, can be changed to anything necessary to make it work... 
// ... 
Blog = new BlogClass(); 

しかし、明らかにそれほど簡単ではありません。私のAngular 2アプリは、私には一般的なエラーメッセージで死ぬ。エラーはBlog = new BlogClass()によって発生します。

これを解決する方法に関するヒントはありますか？

Answer 1

declareは、宣言されているものが別の場所で定義されている必要があることを意味します。

declare var Blog: BlogClass; 

は、得られたJavaScriptで任意のコードを生成しないので、Blogが存在しないため、この割り当て

Blog = new BlogClass(); 

は、実行時に失敗します。

あなたがdeclareを削除すると、この行が生成されたコードで表示されます。

var Blog; 

しかし、それは必ずしもグローバルスコープでvar Blogを作成しません - あなたがモジュールとしてtypescriptですコードをコンパイルするとき、それは内部で作成されます。 typescriptモジュールからエクスポートしてそのモジュールをjavacスクリプトコードにインポートするルートを経由しない限り、外部のjavascriptコードにはアクセスできません。

オブジェクトはグローバルスコープで作成されていることを確認するための最も簡単な（しかし、少し汚れ）の方法は、明示的にそれを行うことです。

(window as any).Blog = new BlogClass();