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