TypeScript et Google Maps

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

TypeScript est un sur-ensemble typé de JavaScript qui se compile en JavaScript brut. L'extrait ci-dessous illustre l'utilisation simple de Google Maps avec 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
  });
}

Premiers pas

Le projet DefinitelyTyped est un projet Open Source qui gère les fichiers de déclaration de type pour de nombreux packages, y compris Google Maps. Les fichiers de déclaration JavaScript de Google Maps (voir les fichiers sources sur GitHub) peuvent être installés à l'aide de la GPR du package @types/google.maps.

npm i -D @types/google.maps

Fonctionnalités alpha et bêta

Les types ne possèdent généralement pas les propriétés, fonctions ou classes des versions alpha ou bêta. Dans de nombreux cas, l'objet peut être converti en type approprié.

L'erreur suivante est causée par la propriété bêta mapId pour 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'.

Vous pouvez corriger l'erreur ci-dessus à l'aide de la commande Cast ci-dessous.

{ center: {lat: 30, lng: -110}, zoom: 8, mapId: '1234' } as google.maps.MapOptions

Packages @types en conflit

Certaines bibliothèques peuvent utiliser un package autre que @types/google.maps, ce qui peut entraîner des conflits. Utilisez l'option de compilation skipLibCheck pour éviter les problèmes de types incohérents.

{
  "compilerOptions": {
    "skipLibCheck": true
  }
}

Spécifier typeRoots

Certains frameworks tels qu'Angular peuvent nécessiter de spécifier l'option de compilation typeRoots pour inclure des types installés à partir de @types/google.maps et de tous les autres packages "@types".

{
    ...
    "compilerOptions": {
        ...
        "typeRoots": [
            "node_modules/@types",
        ],
        ...
    }
}