TypeScript ve Google Haritalar

Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

TypeScript, düz JavaScript'te derlenen bir tür JavaScript'in üst kümesidir. Aşağıdaki snippet'te TypeScript kullanılarak Google Haritalar'ın basit şekilde nasıl kullanılacağı gösterilmiştir.

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şlayın

DefinitelyTyped projesi, Google Haritalar dahil birçok paket için tür dosya türlerini barındıran açık kaynaklı bir projedir. Google Haritalar JavaScript beyan dosyaları (GitHub'daki kaynak dosyalara göz atı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 özellikleri, işlevleri veya sınıfları içermez. Çoğu durumda nesne doğru türde yayınlanabilir.

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ın ile 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 çakışmalara neden olabilir. Tutarsız türlerle ilgili sorunları önlemek için skipLibCheck derleyici seçeneğini kullanın.

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

typeRoots belirtme

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

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