TypeScript و Google Maps

TypeScript یک مجموعه بزرگ از جاوا اسکریپت است که به جاوا اسکریپت ساده کامپایل می‌شود. قطعه کد زیر استفاده ساده از نقشه‌های گوگل را با استفاده از 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
  });
}

شروع به کار

پروژه CertainTyped یک پروژه متن‌باز است که فایل‌های اعلان نوع را برای بسیاری از بسته‌ها از جمله Google Maps نگهداری می‌کند. فایل‌های اعلان جاوا اسکریپت Google Maps (به فایل‌های منبع در GitHub مراجعه کنید) را می‌توان با استفاده از NPM از بسته @types/google.maps نصب کرد.

npm i -D @types/google.maps

ویژگی‌های آلفا و بتا

این نوع‌ها معمولاً ویژگی‌ها، توابع یا کلاس‌های موجود در نسخه‌های آلفا یا بتا را ندارند. در بسیاری از این موارد، می‌توان شیء را به نوع صحیح تبدیل کرد.

خطای زیر توسط ویژگی mapId beta برای 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
  }
}

نوع را مشخص کنیدریشه ها

برخی از فریم‌ورک‌ها مانند Angular ممکن است نیاز به مشخص کردن گزینه کامپایلر typeRoots داشته باشند تا انواع نصب شده از @types/google.maps و سایر بسته‌های "@types" را شامل شود.

{
    ...
    "compilerOptions": {
        ...
        "typeRoots": [
            "node_modules/@types",
        ],
        ...
    }
}