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