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" الأخرى.

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