TypeScript e Google Maps

O TypeScript é um superconjunto de JavaScript com tipagem que é compilado em JavaScript simples. O snippet abaixo demonstra o uso simples do Google Maps com 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
  });
}

Começar

O projeto DefinitelyTyped é um projeto de código aberto que mantém arquivos de declaração de tipo de muitos pacotes, incluindo o Google Maps. Os arquivos de declaração do JavaScript do Google Maps (consulte arquivos de origem no GitHub) podem ser instalados usando NPM do pacote @types/google.maps.

npm i -D @types/google.maps

Recursos Alfa e Beta

Os tipos geralmente não têm as propriedades, funções ou classes encontradas em versões Alfa ou Beta. Em muitos desses casos, pode ser feito um cast do objeto para o tipo correto.

O erro a seguir é causado pela propriedade Beta do mapId para 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'.

O erro acima pode ser corrigido com o cast abaixo.

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

Pacotes de @types conflitantes

Algumas bibliotecas talvez usem um pacote diferente de @types/google.maps, o que pode causar conflitos. Utilize a opção do compilador skipLibCheck para evitar problemas com tipos inconsistentes.

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

Especificar typeRoots

Alguns frameworks, como o Angular, podem exigir a especificação da opção do compilador typeRoots para incluir tipos instalados de @types/google.maps e todos os outros pacotes "@types".

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