টাইপস্ক্রিপ্ট এবং গুগল ম্যাপ

টাইপস্ক্রিপ্ট হলো জাভাস্ক্রিপ্টের একটি টাইপড সুপারসেট যা কম্পাইল হয়ে সাধারণ জাভাস্ক্রিপ্টে পরিণত হয়। নিচের কোড স্নিপেটটিতে টাইপস্ক্রিপ্ট ব্যবহার করে গুগল ম্যাপসের একটি সাধারণ ব্যবহার দেখানো হয়েছে।

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-এ সোর্স ফাইল দেখুন) @types/google.maps প্যাকেজ থেকে NPM ব্যবহার করে ইনস্টল করা যায়।

npm i -D @types/google.maps

দ্রষ্টব্য: এই প্রকারগুলি স্বয়ংক্রিয়ভাবে তৈরি হয়। এই প্রকারগুলি নিয়ে কোনো সমস্যা জানাতে, একটি সাপোর্ট টিকেট খুলুন।

আলফা এবং বিটা বৈশিষ্ট্য

এই টাইপগুলোতে সাধারণত আলফা বা বিটা রিলিজের প্রোপার্টি, ফাংশন বা ক্লাসগুলো থাকে না। এই ধরনের অনেক ক্ষেত্রে, অবজেক্টটিকে সঠিক টাইপে কাস্ট করা যায়।

MapOptions এর mapId beta প্রপার্টির কারণে নিম্নলিখিত ত্রুটিটি ঘটে।

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-এর মতো কিছু ফ্রেমওয়ার্কে @types/google.maps এবং অন্যান্য সমস্ত "@types" প্যাকেজ থেকে ইনস্টল করা টাইপগুলি অন্তর্ভুক্ত করার জন্য typeRoots কম্পাইলার অপশনটি নির্দিষ্ট করার প্রয়োজন হতে পারে।

দ্রষ্টব্য: ডিফল্টরূপে সমস্ত দৃশ্যমান "@types" প্যাকেজ আপনার কম্পাইলেশনে অন্তর্ভুক্ত করা হয়। যেকোনো আবদ্ধ ফোল্ডারের node_modules/@types-এ থাকা প্যাকেজগুলোকে দৃশ্যমান বলে গণ্য করা হয়।

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