TypeScript ומפות Google

TypeScript הוא קבוצת-על של JavaScript שנוצרת על-ידי הקלדת טקסט, ומרכיבה את 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'.

אפשר לתקן את השגיאה שלמעלה באמצעות סמל ההעברה (cast) שבהמשך.

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