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