TypeScript è un soprainsieme di JavaScript digitato che compila in JavaScript semplice. Lo snippet di seguito mostra l'utilizzo semplice di Google Maps tramite 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
Il progetto DefinitelyType è un progetto open source che gestisce i file di dichiarazione di tipo per molti pacchetti, inclusi Google Maps. I file di dichiarazione JavaScript di Google Maps (vedi i file di origine su GitHub) possono essere installati utilizzando la funzione NPM del pacchetto @types/google.maps.
npm i -D @types/google.maps
Funzionalità alpha e beta
In genere i tipi non hanno proprietà, funzioni o classi presenti nelle release alpha o beta. In molti di questi casi, l'oggetto può essere trasmesso al tipo corretto.
Il seguente errore è causato dalla proprietà mapId beta di 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 da @types/google.maps, che potrebbe causare conflitti. Utilizza l'opzione del compilatore skipLibCheck per evitare problemi con i tipi incoerenti.
{
"compilerOptions": {
"skipLibCheck": true
}
}
Specifica di root di tipo
Alcuni framework come Angular possono richiedere di specificare l'opzione del compilatore typeRoots per includere i tipi installati da @types/google.maps e tutti gli altri pacchetti "@types".
{
...
"compilerOptions": {
...
"typeRoots": [
"node_modules/@types",
],
...
}
}