TypeScript और Google Maps

TypeScript, JavaScript का एक टाइप किया गया सुपरसेट है, जो सादे JavaScript में कंपाइल होता है. नीचे दिए गए स्निपेट में, TypeScript का इस्तेमाल करके Google Maps के आसान इस्तेमाल के बारे में बताया गया है.

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 JavaScript की डिक्लेरेशन फ़ाइलों (GitHub पर सोर्स फ़ाइलें देखें) को @types/google.maps पैकेज से एनपीएम का इस्तेमाल करके इंस्टॉल किया जा सकता है.

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

typeRoots की जानकारी दें

Angular जैसे कुछ फ़्रेमवर्क में, typeRoots कंपाइलर विकल्प को तय करना पड़ सकता है. इससे @types/google.maps और अन्य सभी "@types" पैकेज से इंस्टॉल किए गए टाइप शामिल किए जा सकते हैं.

ध्यान दें: डिफ़ॉल्ट रूप से, दिखने वाले सभी "@types" पैकेज आपके कंपाइलेशन में शामिल होते हैं. किसी भी एनक्लोज़िंग फ़ोल्डर के node_modules/@types में मौजूद पैकेज, दिखने वाले माने जाते हैं.

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