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