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
ב-frameworks מסוימות, כמו Angular, ייתכן שיהיה צורך לציין את אפשרות המהדר typeRoots כדי לכלול סוגים שהותקנו מ-@types/google.maps ואת כל חבילות ה-"@types" האחרות.
{
...
"compilerOptions": {
...
"typeRoots": [
"node_modules/@types",
],
...
}
}