TypeScript ve Google Haritalar

TypeScript, JavaScript'in türü belirlenmiş bir üst kümesidir ve düz JavaScript'e derlenir. Aşağıdaki snippet, TypeScript kullanarak Google Haritalar'ın basit kullanımını gösterir.

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

Başlarken

DefinitelyTyped projesi, Google Haritalar dahil olmak üzere birçok paket için tür bildirim dosyalarını koruyan bir açık kaynak projesidir. Google Haritalar JavaScript bildirim dosyaları (GitHub'daki kaynak dosyalarına bakın) @types/google.maps paketinden NPM kullanılarak yüklenebilir.

npm i -D @types/google.maps

Alfa ve Beta Özellikler

Türler genellikle alfa veya beta sürümlerinde bulunan özelliklere, işlevlere ya da sınıflara sahip değildir. Bu durumların çoğunda, nesne doğru türe dönüştürülebilir.

Aşağıdaki hata, MapOptions için mapId beta özelliğinden kaynaklanmaktadır.

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

Yukarıdaki hata, aşağıdaki yayınla düzeltilebilir.

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

Çakışan @types paketleri

Bazı kitaplıklar, @types/google.maps dışında bir paket kullanabilir ve bu durum çakışmalara neden olabilir. Tutarsız türlerle ilgili sorunları önlemek için skipLibCheck derleyici seçeneğini kullanın.

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

typeRoots'u belirtme

Angular gibi bazı çerçeveler, typeRoots derleyici seçeneğinin belirtilmesini gerektirebilir. Bu seçenek, @types/google.maps ve diğer tüm "@types" paketlerinden yüklenen türleri dahil etmek için kullanılır.

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