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

টাইপস্ক্রিপ্ট হল জাভাস্ক্রিপ্টের একটি টাইপ করা সুপারসেট যা প্লেইন জাভাস্ক্রিপ্টের সাথে কম্পাইল করে। নীচের স্নিপেটটি টাইপস্ক্রিপ্ট ব্যবহার করে গুগল ম্যাপের সহজ ব্যবহার প্রদর্শন করে।

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
  });
}

শুরু করা

ডেফিনিটিটাইপড প্রজেক্ট হল একটি ওপেন সোর্স প্রজেক্ট যা গুগল ম্যাপ সহ অনেক প্যাকেজের জন্য টাইপ ডিক্লারেশন ফাইল রক্ষণাবেক্ষণ করে। গুগল ম্যাপস জাভাস্ক্রিপ্ট ডিক্লারেশন ফাইল (গিটহাবে সোর্স ফাইল দেখুন) @types/google.maps প্যাকেজ থেকে NPM ব্যবহার করে ইনস্টল করা যেতে পারে।

npm i -D @types/google.maps

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

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

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

নিম্নলিখিত ত্রুটিটি MapOptions এর mapId বিটা বৈশিষ্ট্যের কারণে ঘটেছে।

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

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

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