How to use Yandex map API in typescript?

Question

JavaScript

There is a project in which typescript is used.
The .ts files are combined and compiled into app.bundle.js
Before the compiled code, I include Yandex maps.

<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?

Answer 1

Вам нужно описать структуру, типы и свойства используемых вами сигнатур в так называемом заголовочном или декларативном файле с расширением d.ts. Мне кажется, что готового пакета для установки через typings нет, но для вашего случая минимальный файл будет выглядеть примерно таким образом:

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;

Answer 2

https://github.com/romka-chev/typed-ymaps-api