TypeScript ve Google Haritalar

TypeScript, JavaScript'in yazılı bir üst kümesidir Düz JavaScript'e derleyen bir web sitesidir. Aşağıdaki snippet basit bir kullanımı göstermektedir Google Haritalar'ın bir parçası.

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

İlgili içeriği oluşturmak için kullanılan DefinitelyTyped projesi, açık kaynaklı projelere beyan dosyaları Google Haritalar dahil birçok paket için. Google Haritalar JavaScript beyanı dosyaları (bkz. kaynak dosyalar ) şuradan NPM kullanılarak yüklenebilir: @types/google.maps paketinde bulabilirsiniz.

npm i -D @types/google.maps

Alfa ve Beta Özellikler

İlgili içeriği oluşturmak için kullanılan türler genellikle alfa ya da alfa veya alt sürümlerde bulunan özelliklere, işlevlere beta sürümlerdir. Bu durumların çoğunda, nesne doğru hedef türü.

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ınlama işleviyle düzeltilebilir.

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

@types paketleri çakışıyor

Bazı kitaplıklar @types/google.maps, bu da çakışmalara neden olabilir. Şunu kullanın: skipLibCheck derleyici seçeneğini kullanabilirsiniz.

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

typeRoots belirtme

Angular gibi bazı çerçeveler, typeRoots şuradan yüklenen türleri içermek için derleyici seçeneği: @types/google.maps ve diğer tüm "@types" paketlerini ekleyebilirsiniz.

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