對外部JavaScript庫使用TypeScript聲明

我不確定這個極端邊緣案例或者其他什麼，但我似乎無法找到關於如何做到這一點的直截了當的文檔（或者我真的不瞭解可用的內容）：對外部JavaScript庫使用TypeScript聲明

我正在開發離子應用程序，並且我需要使用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

我也嘗試了以下，但得到了同樣的錯誤。

import ALKMaps = require('alkmaps');

使用參考標籤，似乎此模塊中工作，但再利用該模塊還拋出項目「是不是一個模塊」的錯誤（這可能需要建立單獨的問題）

從https://github.com/Microsoft/TypeScript/issues/11420我發現使用export = ALKMaps或export as namespace ALKMaps但將其添加到我的聲明文件導致不同的錯誤，而不是。

任何人都可以請直接解釋如何使用代表外部JS庫在打字稿節點模塊中的聲明文件？

來源

2017-03-07 Mike

從'alkmaps'和import ALKMaps = require（'alkmaps'）'進口{ALKMaps}'在運行時做兩件非常不同的事情。你是什麼意思？ –

那是我對node.js有限理解的一個方面。我嘗試了這兩種形式的導入（當然不是同一時間），嘗試用「不是模塊」錯誤糾正問題。 – Mike

這是我能得到alkMaps進入我的角2的應用程序

插入腳本到index.html文件。

聲明組件中的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")}); 
    } 
}

這將讓地圖顯示，你可以把不同層的地圖上，但是地圖上顯示不正確。 @Mike，如果你能夠做得更好，請你評論一下嗎？

編輯：圖像上的瓷磚拉長，沒有連接。檢查CSS中的main.css後，建成後，img元素上設置一個全局屬性：

img { 
    max-width:100% 
}

對於本來設置爲256％的寬度地圖瓦片。爲了糾正元素，我改變了樣式表中img的屬性。

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

來源

2018-01-30 23:41:20

我剛開始研究一些與此相關的代碼。我能做的最好的是創建2個私有NPM模塊：1）將更高級別的映射存儲到ALK Maps庫，2）存儲.d.ts文件。第1個NPM模塊對第2個模塊有依賴關係，並查看它以獲取類型。（我最終命名了第二個「@ types/alkmaps」，這在技術上是錯誤的，但由於它是一個私有的repo，所以它應該沒問題，這使TypeScript更容易從該模塊中找到類型）。 – Mike

對外部JavaScript庫使用TypeScript聲明

回答

相關問題