TypeScript عبارة عن مجموعة مكوّنة من رموز جافا سكريبت يتم تجميعها مع نص 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",
],
...
}
}