Раньше, когда еще не было ни PHPStorm-а, ни VS Code, специализация была в основном на проектах с использованием Drupal CMS. И ни одной IDE с нормальным автокомплитом для "Друпала" не существовало. Повсеместно получалось достаточно быстро написать небольшой редактор для этого. CodeLobster же смог двинуться дальше — редактор превратился в полноценную IDE. С этого времени очень сильно расширился набор поддерживаемых фреймворков, появились клиенты, пожелания и их исполнение. Впоследствии вышла уже мультиплатформенная версия (включая Мак, Линукс и т.д.). Был сделан достаточно серьезный крен в сторону работы с TypeScript/JavaScript, а также фреймворков на них. В данный момент активно разрабатывается поддержка Python.

Поддержка TypeScript в CodeLobster IDE

С самого момента своего появления, TypeScript пользуется стабильной высокой популярностью среди программистов.

Так как сложность и масштаб современных JavaScript проектов значительно возросли, всё больше и больше разработчиков начали интересоваться TypeScript и собираются писать на нём в будущем.

В этой статье мы расскажем о возможностях CodeLobster IDE, облегчающих и ускоряющих работу с TypeScript.

Описанная функциональность поможет вам эффективно поддерживать уже существующую кодовую базу или быстрее начать применять TypeScript в своих новых проектах.

Особенности и преимущества TypeScript

TypeScript позволяет использовать строгую статическую типизацию при JavaScript разработке, при этом соответствие типов проверяется на этапе компиляции, а не во время выполнения скрипта.

Многие потенциальные ошибки можно исправить ещё до того, как будет сгенерирован рабочий JavaScript, это спасает от необходимости тратить дополнительное время и силы на отладку и тестирование приложений.

Этот язык, конечно, создан для опытных разработчиков, хорошо знакомых с принципами ООП. Он позволяет программировать в экосистеме JS так же, как на C# или Java: применять систему типов, классы, интерфейсы, модификаторы доступа, дженерики, перечисления и пространства имён.

TypeScript хорошо подходит для больших команд, работающих над масштабными проектами. Чужой код на TS становится более понятным и его легче читать.

Так что, даже программисты с разным уровнем подготовки могут обмениваться результатами своей работы и другим командам также будет гораздо проще работать с вашими решениями.

Поддержка синтаксиса и семантики TypeScript в CodeLobster

Интеллектуальное автодополнение для TypeScript выполняет сразу несколько важных функций. Оно помогает соблюдать синтаксис этого сложного объектно-ориентированного языка программирования, снижает вероятность ошибок и одновременно ускоряет набор кода.  

Для использования достаточно лишь ввести префикс и нажать Ctrl + Space. Вы получите дополнения по коду TS, которые лучше всего подходят в данном случае, так как список фильтруется в зависимости от контекста.

Автокомплит предоставит вам подсказки по ключевым словам TypeScript, предложит подходящие имена классов и интерфейсов, поможет быстрее выбирать члены классов, методы и переменные. 

IDE хорошо разбирается как в синтаксисе, так и в семантике WEB-языков. Редактор предлагает удобную семантическую подсветку для TypeScript, раскрашивая код таким образом, что он лучше визуально воспринимается. 

С первого взгляда можно выделить все его основные конструкции: ключевые слова, комментарии, имена модулей, классов или интерфейсов.

В CodeLobster IDE такое цветовое оформление носит название "Цветовая схема". В программе уже есть более 20 схем и их можно гибко настроить в соответствии с собственными предпочтениями.

Перейдите в главное меню, выберите пункт "Tools" -> "Preferences" и в появившемся диалоговом окне откройте раздел "Editor" -> "Colors".

В разделе "Show settings for" кликните пункт "TypeScript", а затем для любого компонента из списка "Display items" установите те цвета, которые подходят вам лучше всего.

Можно использовать установки по умолчанию, они давно уже стали привычными для большинства программистов, или модифицировать и сохранить под собственным именем любую из цветовых схем.

Всплывающие подсказки и динамическая помощь

Так как TypeScript - это всё тот же JavaScript, мы без проблем можем взаимодействовать с окружением, в котором будут выполняться наши скрипты.

Используйте любые JS конструкции и работайте, например, с объектами браузера или DOM, при этом в вашем распоряжении есть вся функциональность встроенной в IDE системы помощи.

Во вкладке "Dynamic Help" отображаются ссылки на документацию по тем элементам и объектам JavaScript, с которыми мы работаем в данный момент в редакторе.

Кликнув по ссылке из динамической помощи, вы всегда получите актуальную информацию по любой WEB-технологии. Кроме того, можно пользоваться быстрыми всплывающими подсказками, которые появляются при наведении указателя на интересующий вас элемент кода.

Навигация по коду в редакторе CodeLobster

Любое программное решение существует в виде проекта, то есть, набора исходных файлов, которые отображаются во вкладке "Project".

CodeLobster обеспечивает отличную навигацию по коду и оперативный поиск в содержимом файлов с подсветкой совпадающих сегментов.

Когда необходимо быстро изучить внутреннее устройство любой функции, класса или интерфейса, кликните по имени элемента, удерживая нажатой клавишу Ctrl и вы мгновенно переместитесь к его определению.

TypeScript помогает писать хорошо структурированный код. Вам понадобится гораздо меньше времени, чтобы прочитать исходник и понять логику работы программы.

Возможность установки локальных закладок в редакторе и сворачивание блоков кода с быстрым предпросмотром их содержимого обеспечивают гладкую работу даже с большими файлами.

Для лучшего понимания исходного кода на TypeScript, требуется альтернативное представление структуры проекта, позволяющее видеть иерархию всех его программных компонентов.

Инструмент "Class View" помогает быстро найти конкретные модули, пространства имён, классы, интерфейсы, свойства и методы.

Пользуясь деревом элементов, легче выяснить, например, к какому пространству имён принадлежат те или иные классы, а выполнив двойной клик в списке, вы сразу же переместитесь к любой функции или переменной.

Характерные иконки, сопровождающие все компоненты "Class View", дают возможность мгновенно отличить члены класса от методов, интерфейсы от классов и пространств имён.

Автоматическое форматирование

При наличии жёстких сроков приходится использовать TypeScript и JavaScript код, наспех написанный другими программистами или просто скопированный из интернета. Он может быть неаккуратно оформленным и практически не читаемым.

В CodeLobster можно смело копировать и вставлять код из любых источников, IDE выполнит его автоформатирование непосредственно во время вставки или по команде Alt + Shift + F.

При этом используется готовый набор популярных в сообществах программистов стандартов, которые легко настроить.

Подобная функциональность также позволяет создать собственные правила оформления исходных кодов и строго их придерживаться.

Как быстро скомпилировать TypeScript файлы

Чтобы ваше приложение начало функционировать, нужно преобразовать исходные TypeScript файлы в чистый JavaScript.

Если на компьютере уже установлен Node, достаточно воспользоваться менеджером пакетов NPM для установки компилятора, запустите терминал и выполните команду:

install -g typescript

После чего можно проверить корректность установки, для этого просто введите строку:

tsc --version

Для компиляции файла, с которым мы работали в этой статье, перемещаемся в директорию с нашим проектом и выполняем следующую команду:

tsc script.ts

Компилятор проверит скрипт на наличие ошибок и сгенерирует файл с расширением "js", теперь его можно подключить к HTML-файлу или запустить как Node приложение.

Подведём итог

Собственно TypeScript не интерпретируется JavaScript движками и все преимущества этого языка реализуются на этапе дизайна приложения.

Он не переносит ничего лишнего в рантайм - во время исполнения никакие проверки не выполняются, генерируется кроссбраузерный и совместимый JavaScript код, который быстро работает и не требует каких-либо улучшений.

С TypeScript у вас будет больше контроля при проектировании WEB-приложений, в то же время, благодаря возможностям CodeLobster IDE ваш кодинг станет более уверенным и быстрым.

Начинающим программистам рано или поздно придётся познакомиться с TypeScript, ведь многие из современных фреймворков разработаны с использованием TS или легко интегрируются с ним. Например, это такие инструменты, как Angular, Babel, Dojo, Express, Knockout, React и Vue.

По TypeScript имеется хорошая документация и его будет легче освоить тому, кто уже знает JavaScript. Это станет отличной "прокачкой" ваших программистских навыков.