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