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