TypeScript و Google Maps

TypeScript یک ابر مجموعه تایپ شده از جاوا اسکریپت است که به جاوا اسکریپت ساده کامپایل می شود. قطعه زیر استفاده ساده از Google Maps با استفاده از 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 Maps نگهداری می کند. فایل های اعلامیه جاوا اسکریپت نقشه های گوگل (به فایل های منبع در 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",
        ],
        ...
    }
}