TypeScript: Eclipse

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

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

Eclipse IDE download

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

Eclipse Windows

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

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

Eclipse IDE for JavaScript and Web Developers

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

Eclipse Accept License
Eclipse Accept License

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

Eclipse accept Certificates
Eclipse accept certificates

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

Eclipse JavaScript launch
Запуск Eclipse for JavaScript and Web Developers

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

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

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

New Project Eclipse
Новый проект в Eclipse

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

Eclipse Project name
Имя проекта в Eclipse

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

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

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

Eclipse Project Explorer
Project Explorer

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

Eclipse TypeScript Syntax Highlighter and autocomplete / авдополнение и подстветка синтаксиса
Подсветка синтаксиса и автодополнение в Eclipse

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

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

Eclipse JavaScript Terminal
Открываем консоль в Eclipse

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

Eclipse JavaScript tsc
Eclipse компилируем проект TypeScript

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

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


Поделиться:

TypeScript: Eclipse: 2 комментария

  1. Для TypeScript все же лучше подходит Visual Studio Code, поскольку от одного производителя.

    Ну и VSCode банально легче и быстрее Eclipse.

Добавить комментарий

Ваш e-mail не будет опубликован.