TypeScript dan Google Maps

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

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 jenis 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

Jenis biasanya tidak memiliki properti, fungsi, atau class yang ditemukan dalam rilis alfa atau beta. Dalam banyak kasus, 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 jenis yang tidak konsisten.

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

Menentukan typeRoots

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

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