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

ध्यान दें: ये टाइप अपने-आप जनरेट होते हैं. इस तरह की किसी समस्या की शिकायत करने के लिए, कृपया सहायता टिकट खोलें.

ऐल्फ़ा और बीटा सुविधाएं

types में आम तौर पर, ऐल्फ़ा या बीटा रिलीज़ में पाई जाने वाली प्रॉपर्टी, फ़ंक्शन या क्लास नहीं होती हैं. इनमें से कई मामलों में, ऑब्जेक्ट को सही टाइप पर कास्ट किया जा सकता है.

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” पैकेज, आपके कंपाइलेशन में शामिल होते हैं. किसी भी एनक्लोज़िंग फ़ोल्डर के नोड_modules/@types वाले पैकेज को माना जाता है.

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