TypeScript et Google Maps

TypeScript est un sur-ensemble typé de JavaScript compilé vers du JavaScript simple. L'extrait ci-dessous illustre une 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 Google Maps (voir les fichiers sources sur GitHub) peuvent être installés à l'aide de NPM à partir 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 dans le 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 conversion 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 compilateur skipLibCheck pour éviter les problèmes de types incohérents.

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

Spécifier typeRoots

Avec certains frameworks tels qu'Angular, il peut être nécessaire de spécifier l'option de compilateur typeRoots pour inclure les types installés à partir de @types/google.maps et tous les autres packages "@types".

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