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 project הוא פרויקט בקוד פתוח ששומר על קובצי הצהרה בחבילות רבות, כולל מפות Google. את קובצי ההצהרה של JavaScript במפות Google (אפשר לקרוא על קובצי מקור ב-GitHub) אפשר להתקין באמצעות NPM מהחבילה @types/google.maps.

npm i -D @types/google.maps

הערה: הסוגים האלה נוצרים באופן אוטומטי. כדי לדווח על בעיה מהסוגים האלה, עליכם לפתוח בקשת תמיכה.

תכונות אלפא ובטא

בדרך כלל המאפיינים types לא כוללים את המאפיינים, הפונקציות או הכיתות בגרסאות אלפא או בטא. במקרים רבים, ניתן להעביר את האובייקט לסוג הנכון.

השגיאה הבאה נגרמת על ידי נכס הבטא של 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".

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

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