TypeScript ומפות Google

TypeScript הוא קבוצת-על מוגדרת של JavaScript שמתבצע לה הידור ל-JavaScript רגיל. קטע הקוד הבא מדגים שימוש פשוט במפות Google באמצעות TypeScript.

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
  });
}

תחילת העבודה

פרויקט DefinitelyTyped הוא פרויקט בקוד פתוח שמכיל קבצי הצהרת טייפ למספר חבילות, כולל מפות Google. אפשר להתקין את קובצי הצהרת ה-JavaScript של מפות Google (ראו קובצי מקור ב-GitHub) באמצעות NPM מהחבילה @types/google.maps.

npm i -D @types/google.maps

תכונות בגרסת אלפא ובגרסת בטא

לסוגים בדרך כלל אין את המאפיינים, הפונקציות והמחלקות שנמצאים בגרסאות אלפא או בטא. במקרים רבים אפשר להמיר את האובייקט לסוג הנכון.

השגיאה הבאה נגרמת בגלל מאפיין הבטא mapId של MapOptions.

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'.

אפשר לתקן את השגיאה שלמעלה באמצעות ההמרה הבאה.

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

חבילות @types מתנגשות

ספריות מסוימות עשויות להשתמש בחבילה אחרת מלבד @types/google.maps, שעלולה לגרום להתנגשויות. השתמשו באפשרות המהדר skipLibCheck כדי למנוע בעיות עם סוגים לא עקביים.

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

ציון typeRoots

ב-frameworks מסוימות, כמו Angular, יכול להיות שיהיה צורך לציין את אפשרות המהדר (compiler) typeRoots כדי לכלול סוגים שהותקנו מ-@types/google.maps ומכל החבילות האחרות של @types.

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