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",
        ],
        ...
    }
}