TypeScript 和 Google 地圖

透過集合功能整理內容 你可以依據偏好儲存及分類內容。

TypeScript 是類型的 JavaScript 超集合,可編譯為純 JavaScript。下列程式碼片段示範使用 TypeScript 的 Google 地圖簡易用法。

let map: google.maps.Map;
const center: google.maps.LatLngLiteral = {lat: 30, lng: -110};

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    center,
    zoom: 8
  });
}

開始使用

DefinitelyTyped 專案是一項開放原始碼專案,可維護許多套件 (包括 Google 地圖) 的宣告檔案。Google Maps JavaScript 宣告檔案 (請參閱 GitHub 上的來源檔案) 可以使用 @types/google.maps 套件中的 NPM 安裝。

npm i -D @types/google.maps

Alpha 和 Beta 版功能

類型通常不含 Alpha 版或 Beta 版中的屬性、函式或類別。在許多情況下,物件都能投放到正確的類型。

下列錯誤是由 MapOptionsmapId Beta 版屬性造成。

error TS2345: Argument of type '{ center: google.maps.LatLng; zoom: number;
mapId: string; }' is not assignable to parameter of type 'MapOptions'. Object
literal may only specify known properties, and 'mapId' does not exist in type
'MapOptions'.

上方的投放可以修正上述錯誤。

{ center: {lat: 30, lng: -110}, zoom: 8, mapId: '1234' } as google.maps.MapOptions

@type 套件發生衝突

部分資料庫可能會使用 @types/google.maps 以外的套件,因此可能會造成衝突。使用 skipLibCheck 編譯器選項可避免類型不一致的問題。

{
  "compilerOptions": {
    "skipLibCheck": true
  }
}

指定 typeRoots

部分架構 (例如 Angular) 可能需要指定 typeRoots 編譯器選項,以便納入從 @types/google.maps 和所有其他「quo@@types"」套件安裝的類型。

{
    ...
    "compilerOptions": {
        ...
        "typeRoots": [
            "node_modules/@types",
        ],
        ...
    }
}