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