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
});
}
YouTube पर शुरुआत करना
DefinitelyTyped प्रोजेक्ट एक ओपन सोर्स प्रोजेक्ट है. इसमें, Google Maps के साथ-साथ कई पैकेज के लिए टाइप की जानकारी वाली फ़ाइलें सेव रहती हैं. Google Maps JavaScript की जानकारी देने वाली फ़ाइलों (GitHub पर सोर्स फ़ाइलें देखें) को @types/google.maps पैकेज से NPM का इस्तेमाल करके इंस्टॉल किया जा सकता है.
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",
],
...
}
}