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