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