Как использовать Yandex map API в typescript?

Есть проект в котором используется typescript.
Файлы .ts объединяются и компилируются в app.bundle.js
Перед скомпилированным кодом я подключаю яндекс карты.

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<script src="build/js/app.bundle.js"></script>


В принципе если я просто использую объект ymaps в коде, то скомпилированный код работает. Но при компиляции typescript выдает ошибки: Error TS2304: Cannot find name 'ymaps'.

Пример той же инициализации карты:
ymaps.ready().then(() => {
                    myMap = new ymaps.Map("main_map", {
                        center: [50.450100, 30.523400],
                        zoom: 12,
                        controls: ['smallMapDefaultSet']
                    });
      });


Вопрос: Как правильнее подключить API яндекс карт в проекте с typescript?
  • Вопрос задан
  • 9204 просмотра
Решения вопроса 1
Вам нужно описать структуру, типы и свойства используемых вами сигнатур в так называемом заголовочном или декларативном файле с расширением d.ts. Мне кажется, что готового пакета для установки через typings нет, но для вашего случая минимальный файл будет выглядеть примерно таким образом:

ymaps.d.ts
declare namespace ymaps {
  export function ready(): Promise;

  class Promise {
    then(onFulfilled?: Function, onRejected?: Function, onProgress?: Function, ctx?: any): Promise;
  }

  export class Map {
    constructor(element: string | any, state: MapState);
  }

  export class MapState {
    center: number[];
    controls: string[];
    zoom: number;
  }
}

И тогда ваш файл, где используете код с инициализацией карты будет выглядеть так:
/// <reference path="ymaps.d.ts" />
...
ymaps.ready().then(() => {
  let myMap = new ymaps.Map("main_map", {
    center: [50.450100, 30.523400],
    zoom: 12,
    controls: ['smallMapDefaultSet']
  });
});


В первой строке ссылаемся на наш файл с объявлениями. Typescript должен это скушать.
Замечу, что в ссылке, указанной предыдущим оратором, есть более развернутые декларативные файлы.

Есть еще один легкий обход всех этих объявлений.

declare var ymaps: any;
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы