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