TypeScript宣言を使用して外部のJavaScriptライブラリを使用する

Question

この極端なケースがあるかどうかわかりませんが、これを行う方法についてはまっすぐな文書を見つけることができません。

イオンアプリケーションを開発しており、その一部としてALKMaps JavaScriptライブラリ（Google Maps APIに似ています）を使用する必要があります。これを行うには、ローカルのnpmモジュールを作成し、その中にhttps://www.typescriptlang.org/docs/handbook/declaration-files/by-example.html#objects-with-propertiesが推奨するalkmaps.d.tsファイルを作成しました）。しかし、角度コードに正しくインポートする方法を理解できないようです。同じ文書では、<reference path=''>タグを使用すると良いとは言えませんが、これがtscコンパイラを満足させる唯一のことです。

マイ宣言ファイル、alkmaps.d.ts

は、のように見えます（簡潔にするために除外の内側）：

declare namespace ALKMaps { 
    export class Map { ... } 
    ... 
} 

そして、私のようなファイルにインポートしようとしていた。

import { ALKMaps } from 'alkmaps'; // Error: File '.../alkmaps.d.ts' is not a module 

Iまた、次のように試しましたが、同じエラーが発生しました。参照タグを使用して

import ALKMaps = require('alkmaps'); 

は、このモジュール内で動作しているようですが、その後、このモジュールを利用したプロジェクトは、まだ「モジュールではありません」というエラーがスローされます（つまり、別の質問を正当かもしれません）

https://github.com/Microsoft/TypeScript/issues/11420からI export = ALKMapsまたはexport as namespace ALKMapsというアイデアを見つけましたが、それらを宣言ファイルに追加すると、代わりに別のエラーが発生しました。

誰でも、タイプスクリプトノードモジュール内の外部JSライブラリを表す宣言ファイルの使い方を簡単に説明できますか？

Answer 1

これは、私はindex.htmlファイルにスクリプトを挿入し、私の角度2のアプリ

にalkMapsを得ることができた方法です。

これは、表示するマップを取得します

imports ..... 

declare let ALKMaps : any; 
@Component({ 
    selector: 'show-map', 
    templateUrl: 'show-map.component.html' 
}) 

export class ShowMapComponent implements Oninit{ 
    map : any; 

    constructor() { 
    } 

    ngOnInit() { 
     ALKMaps.APIKey = "apiKey"; 
     this.map = new ALKMaps.Map("map", {displayProjection: new ALKMaps.Projection("EPSG:4326")}); 
    } 
} 

マップを追加しているコンポーネントでALKMaps変数を宣言して、あなたはしかし、マップが正しく表示されない、地図上の異なる層を置くことができます。 @マイク、もしこれ以上のことができたら、コメントしてください。

EDIT：画像上のタイルは伸びていて、接続されていません。

img { 
    max-width:100% 
} 

もともと幅256％に設定されているマップのタイルを：CSSのmain.cssを検査した後、構築した後にimg要素にグローバルプロパティを設定します。要素を修正するために、スタイルシートでimgのプロパティを変更しました。

show-map { 
    img { 
     max-width: 256% 
    } 
}