TypeScript dan Google Maps

TypeScript adalah superset JavaScript hasil ketikan yang dikompilasi menjadi JavaScript biasa. Cuplikan di bawah ini menunjukkan penggunaan sederhana Google Maps menggunakan TypeScript.

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
  });
}

Memulai

Project DefinitelyTyped adalah project open source yang mengelola file deklarasi ketikan untuk banyak paket, termasuk Google Maps. File deklarasi JavaScript Google Maps (lihat file sumber di GitHub) dapat diinstal menggunakan NPM dari @types/google.maps.

npm i -D @types/google.maps

Fitur Alfa dan Beta

Ketikan biasanya tidak memiliki properti, fungsi, atau class yang ditemukan dalam rilis alfa atau beta. Dalam banyak kasus ini, objek dapat ditransmisikan ke ketikan yang benar.

Error berikut disebabkan oleh properti beta mapId untuk MapOptions.

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'.

Error di atas dapat diperbaiki dengan transmisi di bawah ini.

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

Paket @types yang bertentangan

Beberapa library mungkin menggunakan paket selain @types/google.maps, yang dapat menyebabkan konflik. Gunakan opsi compiler skipLibCheck untuk menghindari masalah dengan ketikan yang tidak konsisten.

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

Menentukan typeRoots

Beberapa framework seperti Angular mungkin perlu menentukan opsi compiler typeRoots untuk menyertakan ketikan yang diinstal dari @types/google.maps dan semua paket "@types" lainnya.

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