TypeScript и Google Карты

TypeScript – это расширенная типизированная версия JavaScript. TypeScript компилируется в обычный JavaScript. Во фрагменте кода ниже приведен простой пример использования Google Карт с 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
  });
}

Начало работы

DefinitelyTyped – это библиотека с открытым исходным кодом, которая поддерживает файлы объявлений типов для многих пакетов, включая Google Карты. Файлы объявлений Google Maps JavaScript (см. исходные файлы на GitHub) можно установить с помощью npm из пакета @types/google.maps.

npm i -D @types/google.maps

Функции в альфа- и бета-версии

Типы обычно не имеют свойств, функций или классов, добавленных в альфа- и бета-версиях. Во многих случаях объект можно привести к нужному типу.

Следующая ошибка вызвана бета-свойством mapId типа 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'.

Эту ошибку можно исправить следующим способом:

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

Пакеты, конфликтующие с @types

Использование в некоторых библиотеках пакетов, отличных от @types/google.maps, может вызывать конфликты. Чтобы избежать их, применяйте параметр компилятора skipLibCheck.

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

Как задать typeRoots

Некоторым фреймворкам, таким как Angular, для работы с типами, установленными из @types/google.maps, и любыми другими пакетами @types может требоваться заданный параметр компилятора typeRoots.

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