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

В Ionic мы вложили все силы в TypeScript, построив не только нашу флагманскую Ionic Framework на TypeScript, но и построив клиентские информационные панели, такие утилиты, как Stencil, и инструменты для создания документации по продукту, основанные на этом языке.

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

Преимущество №1: статический ввод

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

Я думаю, можно с уверенностью сказать, что TypeScript стал благом для нашей фронтенд-разработки в этом отношении. Наша первая версия Ionic Framework была написана на ES5, и разработка и обслуживание были немного сложнее без системы статических типов. Я не думаю, что кто-либо в команде когда-либо вернется к этому. Теперь мы используем TypeScript в нашей платформе с открытым исходным кодом, интерфейсе командной строки, инструментах, а также в коммерческих продуктах, которые все чаще используются во внешних интерфейсах, в различных фреймворках и не-фреймворках.

Помимо набора текста, я считаю, что наши базы кода TypeScript, как правило, более однородны, что облегчает переход между проектами и поддержку инженеров. Это могло быть побочным эффектом того, что современный JS стал немного более предписывающим, но это приятный побочный эффект.

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

Преимущество № 2: Бесплатная документация

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

Разработчики Java / C # посмеялись бы над этим, поскольку у них уже много лет существует автоматическая генерация документов, но она не получила широкого распространения во внешнем интерфейсе. Такие инструменты, как jsdoc и подобные, работали над громоздкими требованиями к комментариям и документам, вынуждая разработчиков создавать много дополнительной работы с аннотациями поверх своего существующего кода только для целей документации.

Напротив, просто используя язык, можно легко сгенерировать обширную документацию из любой кодовой базы TypeScript либо с помощью специальных инструментов Compiler API (см. Следующий пункт), либо с помощью готовых инструментов, таких как typedoc.

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

Вот пример процесса полностью настраиваемой генерации документации с использованием Compiler API (см. Следующий пункт). Это создается путем прохождения AST и вывода HTML.

Преимущество № 3: Инструменты

В отличие от традиционных языков со статической типизацией, таких как Java и C #, TypeScript поставляется с первоклассным API компилятора, раскрывающим механизм синтаксического анализа и генерации AST языка. Этот API можно использовать для просмотра абстрактного синтаксического дерева (AST) языка, и для изменения кода на лету.

Мы использовали этот API по-разному, в том числе для создания документации (с помощью этого API легко создавать собственные генераторы документов, см. Ссылку в конце последнего раздела), создание утилит, таких как Stencil, которые находятся между вашей сборкой TypeScript и преобразованный вывод, создание привязок для конкретной платформы для Ionic Framework путем просмотра информации о нашем типе и генерации response / vue / и т. д. привязки, а также для загрузки информации о типах библиотек в наши продукты.

Это, вероятно, недооцененная функция TypeScript №1, и я надеюсь, что проект улучшит документацию по этой функции, поскольку у авторов инструментов есть множество возможностей.

Для тех, кому интересно, как работает этот API, база кода Stencil заполнена примерами использования этого API, и, учитывая, что этот API относительно неясен, Адам Брэдли всегда учит меня новым трюкам, которых нет в документации. .

Преимущество №4: Продукт

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

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

Помимо этого, мы работали над инструментом визуальной разработки, который позволяет разработчикам легко добавлять в конструктор произвольные веб-компоненты, если для них есть типы TypeScript. Это позволяет нам предлагать модель непатентованных компонентов, которой в настоящее время не существует на рынке (у всех наших конкурентов есть модели нестандартных компонентов, которые работают только в их инструментах / технологиях).

Предоставляя файл .d.ts, мы можем извлечь все свойства и атрибуты для компонента, позволяя пользователю извлекать этот компонент и легко настраивать все доступные свойства для элемента управления. Поскольку TypeScript поставляется с кучей уже набранных компонентов HTML5, мы можем легко их импортировать!

Еще неизвестно, как это будет развиваться, но в тот момент, когда я понял, что выбранный нами язык дал нам ощутимое преимущество продукта, я понял, что TypeScript приносит гораздо больше, чем просто статическая типизация во время разработки. Информация, которую TypeScript добавляет в ваш код, имеет огромное значение, помимо проверки типов!

Я тоже не думаю, что мы одиноки в этом. Например, некоторые ключевые функции Angular зависят от наличия в вашем коде расширенных типов. (Интересный факт: Angular был причиной того, что наша команда в первую очередь занялась TypeScript. Спасибо, команда Angular!)

Никогда не оглядываясь назад

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

Сначала я не был увлечен TypeScript, полагая, что это помешает разработке и потребует строгого набора текста, что добавит ненужных накладных расходов. Вместо этого я обнаружил, что язык идеально подходит между набором текста и выводом типа (извините, Java), предлагая при этом множество других преимуществ. Я ценил, что TypeScript может быть как типизированным, так и нетипизированным по вашему желанию, и он все равно будет приносить пользу.

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

Помог ли TypeScript вашей команде помимо проверки типов? Я хотел бы услышать вашу историю в ответе ниже!