TypeScript, düz JavaScript halinde derlenen, JavaScript'in türetilmiş bir üst kümesidir. Aşağıdaki snippet'te, Google Haritalar'ın TypeScript kullanılarak ne şekilde kullanıldığı 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 beyan dosyalarını koruyan açık kaynaklı bir projedir. Google Haritalar JavaScript beyan dosyaları (GitHub'daki kaynak dosyalara bakın) PMtypes/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 ya da sınıfları içermez. Çoğu durumda nesne doğru türe yayınlanabilir.
Aşağıdaki hata, MapOptions
için mapId
beta mülkünden kaynaklanı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
@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'u 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ğini belirtmeyi gerektirebilir.
{
...
"compilerOptions": {
...
"typeRoots": [
"node_modules/@types",
],
...
}
}