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، نگهداری می‌کند. فایل‌های اعلامیه جاوا اسکریپت 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",
        ],
        ...
    }
}