TypeScript ve Google Haritalar

TypeScript, düz JavaScript için derlenen, türetilmiş bir JavaScript üst kümesidir. Aşağıdaki snippet, TypeScript kullanarak Google Haritalar'ın basit kullanımını göstermektedir.

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 da dahil birçok paket için tür beyan dosyalarını koruyan açık kaynaklı bir projedir. Google Haritalar JavaScript beyan dosyaları (GitHub'daki kaynak dosyalar bölümüne bakın), @types/google.maps paketinden NPM kullanılarak yüklenebilir.

npm i -D @types/google.maps

Alfa ve Beta Özellikler

Türlerde genellikle alfa veya beta sürümlerinde bulunan özellikler, işlevler veya sınıflar bulunmaz. Çoğu durumda nesne doğru türe yayınlanabilir.

Aşağıdaki hata, MapOptions ürününün mapId beta özelliğinden kaynaklanıyor.

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 çakışıyor

Bazı kitaplıklar @types/google.maps dışında bir paket kullanabilir. 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 belirtme

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

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