TypeScript הוא קבוצת-על מסוג מוקלדת של JavaScript מה הידור (compile) ל-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'.
אפשר לתקן את השגיאה שלמעלה על ידי הפעלת 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",
],
...
}
}