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

TypeScript, JavaScript का टाइप किया गया सुपरसेट है जो सामान्य JavaScript में इकट्ठा होती है. नीचे दिया गया स्निपेट उपयोग को आसान दिखाता है 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 मैप सहित कई पैकेज के लिए. Google Maps JavaScript का एलान फ़ाइलें (देखें सोर्स फ़ाइलें GitHub पर) है, जिसे NPM का इस्तेमाल करके इंस्टॉल किया जा सकता है. @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" पैकेज.

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