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) חבילה מסוג @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",
        ],
        ...
    }
}