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