TypeScript و"خرائط Google"

TypeScript هي مجموعة فرعية مكتوبة من JavaScript يتم تجميعها إلى JavaScript عادية. يوضّح المقتطف أدناه طريقة بسيطة لاستخدام Google Maps باستخدام 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". يمكن تثبيت ملفات تعريف Google Maps JavaScript (راجِع ملفات المصدر على 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

قد تتطلّب بعض الأُطر، مثل Angular، تحديد خيار برنامج التجميع typeRoots لتضمين الأنواع المثبَّتة من ‎@types/google.maps وجميع حِزم ‎@types الأخرى.

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