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