TypeScript и карты Google

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

TypeScript — это типизированный надмножество JavaScript, который компилируется в обычный JavaScript. Фрагмент ниже демонстрирует простое использование Google Maps с использованием 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 Maps. Файлы объявлений 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
  }
}

Указание типаRoots

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

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

TypeScript — это типизированный надмножество JavaScript, который компилируется в обычный JavaScript. Фрагмент ниже демонстрирует простое использование Google Maps с помощью 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 Maps. Файлы объявлений 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
  }
}

Указание типаRoots

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

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