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 का इस्तेमाल करके इंस्टॉल की जा सकती हैं.
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",
],
...
}
}