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

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

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 সহ অনেক প্যাকেজের জন্য টাইপ ডিক্লেয়ারেশন ফাইল রক্ষণাবেক্ষণ করে। @types/google.maps প্যাকেজ থেকে NPM ব্যবহার করে Google Maps JavaScript ঘোষণা ফাইল (GitHub-এ সোর্স ফাইল দেখুন) ইনস্টল করা যেতে পারে।

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