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 पर सोर्स फ़ाइलें देखें) को 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",
],
...
}
}