TypeScript dan Google Maps

TypeScript adalah superset type dari JavaScript 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 type untuk banyak paket, termasuk Google Maps. File deklarasi JavaScript Google Maps (lihat file sumber di GitHub) dapat diinstal menggunakan NPM dari paket @types/google.maps.

npm i -D @types/google.maps

Fitur Alfa dan Beta

Type biasanya tidak memiliki properti, fungsi, atau class yang ditemukan dalam rilis alfa atau beta. Dalam banyak kasus ini, objek dapat ditransmisikan ke type 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 terkait type yang tidak konsisten.

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

Menentukan typeRoots

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

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