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",
],
...
}
}