TypeScript: Eclipse

Назад | Учебник TypeScript | Вперёд

В прошлых статьях мы редактировали каждый файл вручную, но в реальных проектах обычно используют одну из IDE (Integrated Development Environment). В этой статье мы будем использовать Eclipse. Он бесплатен и поддерживает разработку на огромном количестве языков, в том числе и TypeScript. Перейдите на официальный сайт и скачайте Eclipse:

В случае с Windows будет скачан исполняемый EXE-файл.

Запустите скачанный установщик.

Брандмауэр Windows запросит разрешение на доступ в сеть для этого приложения. Дайте ему, что он просит. Затем в списке выберите пункт Eclipse IDE for JavaScript and Web Developers:

В следующем окне кликните INSTALL. Прочитайте и согласитесь с лицензионным соглашением:

Поставьте галочку, что вы доверяете сертификатам:

По окончании процесса установки кликните на LAUNCH:

Снова будет окно брандмауэра Windows. Дайте все разрешения, что он просит. В окне выбора Workspace можете пока оставить всё как есть, либо выберите какой-нибудь свой каталог, в котором будут храниться файлы ваших проектов. Кликните Launch.

Не смотря на то, что мы выбрали Eclipse for JavaScript and Web Developers, у нас только самая базовая поддержка TypeScript. У нас есть подсветка синтаксиса и автодополнение. В Eclipse Marketplace можно найти плагины, которые обеспечат гораздо больше возможностей, но нам пока хватит базового функционала.

Создайте новый проект выбрав в главном меню File -> New -> Project…:

В Project Name введите “tscolorballs” и кликните Finish.

Теперь закройте вкладку Welcome:

В левой части Eclipse мы увидим дерево проектов. Помните, как при открытии Eclipse мы указывали каталог для workspace? Найдите его на диске. Внутри него теперь должен быть подкаталог “tscolorballs”. Внутри него только один файл “.project”. Скопируйте в этот каталог все наши исходные файлы нашего игры так, чтобы файл “tsconfig.json” лежал рядом с “.project”.

Обновите список файлов в дереве проекта выбрав в главном меню File -> Refresh. Мы увидим все наши файлы:

Открыть файл на редактирование можно двойным щелчком. Обратите внимание, что теперь в редакторе у нас будет подсветка синтаксиса. Также у нас есть автодополнение, например, в конструкторе “Engine.ts” мы ставим точку после this и видим возможные варианты:

Вопрос: как нам теперь собирать проект TypeScript в Eclipse? В Marketplace есть более сложные плагины для поддержки TypeScript, которые добавляют визуальное редактирование “tsconfig.json” и сборку проекта из меню, но сейчас у нас ничего такого нет. Мы будем вызывать tsc вручную из терминала. В главном меню выберите Window -> Show View -> Terminal.

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

Теперь у нас есть консоль. По умолчанию мы в ней находимся в нашем домашнем каталоге. Перейдите в каталог с workspace Eclipse, а затем в подкаталог с проектом tscolorballs внутри него. Для сборки проекта просто запускайте компилятор tsc, как вы это делали в прошлых статьях:

После компиляции мы просто открываем “tscolorballs.html” из папки проекта Eclipse в браузере.

Назад | Учебник TypeScript | Вперёд