TypeScript è un soprainsieme digitato di JavaScript che si compila in semplice codice JavaScript. Lo snippet seguente illustra un uso semplice di Google Maps con TypeScript.
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
});
}
Per iniziare
La DefinitelyTyped è progetti open source che mantengono i tipi file di dichiarazione per molti pacchetti, tra cui Google Maps. La dichiarazione JavaScript di Google Maps (vedi file di origine su GitHub) possono essere installate utilizzando la gestione dei partner di rete dal @types/google.maps.
npm i -D @types/google.maps
Funzionalità Alpha e Beta
La tipi in genere non hanno le proprietà, le funzioni o le classi presenti in alpha o versioni beta. In molti di questi casi, l'oggetto può essere trasmesso di testo.
Il seguente errore è causato dalla proprietà beta mapId per MapOptions.
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'.
L'errore riportato sopra può essere corretto con la trasmissione riportata di seguito.
{ center: {lat: 30, lng: -110}, zoom: 8, mapId: '1234' } as google.maps.MapOptions
Pacchetti @types in conflitto
Alcune librerie potrebbero utilizzare un pacchetto diverso @types/google.maps, che potrebbero causare conflitti. Utilizza la skipLibCheck del compilatore per evitare problemi con tipi incoerenti.
{
"compilerOptions": {
"skipLibCheck": true
}
}
Specifica di typeRoots
Alcuni framework, come Angular, possono richiedere di specificare typeRoots del compilatore per includere i tipi installati @types/google.maps e tutti gli altri "@tipi" pacchetti.
{
...
"compilerOptions": {
...
"typeRoots": [
"node_modules/@types",
],
...
}
}