Как установить шаблоны Typescript для карт Google

Ответ 1

Что делает это исключительным, так это то, что скрипт maps необходимо загружать отдельно от вашего пакета приложений. Это не обычная npm install где вы получаете .js и .ts хорошо упакованные для потребления.

TL;DR: наборы могут быть установлены через npm, но скрипт .js должен быть загружен с помощью <script> (для SPA этот тег можно добавить на веб-страницу на лету, чтобы улучшить время начальной загрузки вашего приложения, что это то, что я делаю).

Мой рекомендуемый путь следующий:

устанавливать

npm install --save @types/googlemaps

Импортировать

import {} from 'googlemaps';

Загрузка и использование (эта функция гарантирует, что скрипт карты добавляется на страницу только один раз, чтобы его можно было вызывать снова и снова)

addMapsScript() {
  if (!document.querySelectorAll('[src="${googleMapsUrl}"]').length) { 
    document.body.appendChild(Object.assign(
      document.createElement('script'), {
        type: 'text/javascript',
        src: googleMapsUrl,
        onload: () => doMapInitLogic()
      }));
  } else {
    this.doMapInitLogic();
  }
}

Помните, что скрипт карты должен быть добавлен на страницу, и скрипт должен быть загружен до того, как что-либо еще произойдет. Например, если вы используете Angular, я обертываю логику addMapsScript() в наблюдаемую и добавляю в свой преобразователь маршрута компоненты карты.

Используйте типы (определения типов включают, но не ограничиваются ими):

const mapRef: google.maps.Map;
const bounds: google.maps.LatLngBounds;
const latLng: google.maps.LatLng;

Избавьтесь от предупреждения: @types/googlemaps/index.d.ts' is not a module.

Добавьте файл в корневой каталог своих проектов с именем index.d.ts и вставьте следующее:

declare module 'googlemaps';

Обновление 01.06.2018 (выводы @DicBrus):

Чтобы импортировать пространства имен Google и избавиться от надоедливой ошибки "Не удается найти пространство имен" Google "", необходимо убедиться, что вы импортировали определения пространств имен в @types/googlemaps

Есть два способа сделать это:
1. директива с тройным слешем

/// <reference path="<relevant path>/node_modules/@types/googlemaps/index.d.ts" />

Работал нормально, но не так элегантно.

Документацию можно найти здесь: https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html

2. Убедитесь, что он импортирован в tsconfig.json и, поскольку он импортирован, вам не нужно дополнительно что-то импортировать

Подробное руководство находится здесь: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

Вы должны проверить два подраздела в compilerOptions: typeRoots и types

По умолчанию все определения типов в node_modules/@types импортируются, если вы не указали именно то, что вам нужно.

В моем конкретном случае у меня был следующий раздел:

"types": []

Отключает автоматическое включение пакетов @types.

Удаление этой строки решило проблему для меня, а также добавила директиву тройной косой черты. Но я выбрал второе решение.

Что касается "пустого" импорта, я не нашел объяснения, как и почему он работает. Я предполагаю, что он НЕ импортирует какой-либо модуль или класс, но он импортирует пространства имен. Это решение мне не подходит, так как IDE помечает этот импорт как "неиспользуемый", и его легко удалить. Например, команда webstorm Ctrl + Alt + O - выполняет предварительную очистку кода и удаляет все ненужные операции импорта.

Ответ 2

На практике мой вариант использования - это Angular CLI, и там мне все нужно

npm install --save @types/google-maps

Ответ 3

Я проверил эти шаги на моем проекте ionic 2, и он отлично работает:

1. установить наборы глобально:

npm install typings --global

2. установить google.maps через набор

typings install dt~google.maps --global --save

3. откройте tsconfig.json и добавьте "typings/*. d.ts" в ваш массив "include", как показано ниже (tsconfig.json).

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2015"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5"
  },
  "include": [
    "src/**/*.ts",
    "typings/*.d.ts"
  ],
  "exclude": [
    "node_modules"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

Ответ 4

typings install google.maps --global

Вам нужен флаг --global (используется как --ambient) для поиска DefinitlyTyped

Ответ 5

На данный момент правильный способ установки:

typings install dt~google.maps --global [--save]

Ответ 6

По состоянию на typescript 2

npm install --save @types/googlemaps

Добавить typeroots в tsconfig

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

Ответ 7

Мое решение (работает для Vue2.x):

устанавливать

npm install --save @types/googlemaps

Добавить скрипт в index.html

<script src="https://maps.googleapis.com/maps/api/js?key=XXX&libraries=YYYY"></script>

Создать в корневой папке types/index.d.ts

Поместите здесь следующие строки:

/// <reference path="../node_modules/@types/googlemaps/index.d.ts" />
declare module 'googlemaps';

Откройте tsconfig.json и добавьте "types/*. D.ts" в ваш массив "include".

  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx",
    "types/**/*.d.ts"
  ],

Ответ 8

Я изо всех сил пытался определить объект Google в окне, наконец, нашел хороший способ, расширив интерфейс Window.

Просто создайте файл google-maps.d.ts с этим:

import '@types/googlemaps';

declare global {
  interface Window {
    google: typeof google;
  }
}

И добавьте его в каталог с types в корневой папке. Затем укажите на эту папку в вашем файле tsconfig.json.

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

Ответ 9

Стивен Пол ясно все объясняет, но есть кое-что важное, чтобы упомянуть. tsconfigs могут расширять друг друга. И расширенный можно переписать родительский. В моем случае у меня был другой tsconfig.app.json в каталоге приложения, который имеет

types: []

массивы. Как уже объяснил Стивен, этот пустой массив переопределяет typeRoots. Так что просто удалите все типы массивов во ВСЕХ связанных файлах tsconfig и убедитесь, что

"typeRoots": ["node_modules/@types"]

настоящее. Само собой разумеется, что @types @googlemaps должен быть установлен

Ответ 10

Самый простой способ - использовать директиву с тройным слешем. К счастью, существует альтернативный синтаксис, который использует преимущества стандартного разрешения пакета:

 /// <reference types="googlemaps" />

Ответ 11

Новый @types/google__maps отлично работает для нас. Первоначальный (@types/googlemaps) был хитрым и имел много зависимостей от браузера (например, HTMLElement), которые не смогли бы скомпилировать TS, если вы используете его в среде nodejs.

npm install @types/google__maps -D

Итак, у нас есть googlemaps, google-maps и google__maps в DefinitiveTyped. Разница объясняется ниже:https://github.com/DefinitelyTyped/DefinitelyTyped/pull/29625#issuecomment-429207839