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 אפשרות מהדר (compiler) כדי למנוע בעיות עם סוגים לא עקביים.

{
  "compilerOptions": {
    "skipLibCheck": true
  }
}

ציון typeRoots

פלטפורמות מסוימות, כמו Angular עשויות לדרוש ציון של typeRoots אפשרות הידור שתכלול סוגים שמותקנים מ- @types/google.maps וכל שאר סוגי ה-"@types" חבילות.

הערה: כברירת מחדל, כל החבילות מסוג '@types' הגלויות נכללות באוסף. חבילות ב-Node_Modules/@types של כל תיקייה מצורפת נחשבות כגלויות.

{
    ...
    "compilerOptions": {
        ...
        "typeRoots": [
            "node_modules/@types",
        ],
        ...
    }
}