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 Maps. אפשר להתקין את קובצי ההצהרה של 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",
        ],
        ...
    }
}