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) باستخدام 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" الأخرى.

ملاحظة: يتم تلقائيًا تضمين جميع حِزم ‎"@types" المرئية في عملية التجميع. تُعتبر الحِزم في node_modules/@types من أي مجلد مُغلق مرئية.

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