टाइपस्क्रिप्ट और Google मैप

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 जैसे कुछ फ़्रेमवर्क में, @types/google.maps और दूसरे सभी "@types" पैकेज से इंस्टॉल किए गए टाइप शामिल करने के लिए, typeRoots कंपाइलर विकल्प की ज़रूरत पड़ सकती है.

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

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