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

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

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