Интервью с разработчиками на TypeScript

TypeScript — это относительно новый язык программирования, который компилируется в JavaScript. Его основные преимущества — это классы и проверка типов на этапе компиляции. Компилятор TypeScript — с открытым исходным кодом, а разработка спонсируется Microsoft.

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

Тем приятнее встретить людей, которым довелось проверить его в “боевых” условиях. У меня получилось побеседовать с двумя ребятами, сделавшими редактор отчетов на TypeScript.



Кто вы? Представьтесь.


Михаил: Здравствуйте! Меня зовут Михаил. Я работаю в DX (тульском офисе Developer Express Inc. — прим. интервьювера) уже 14 лет. Начинал я с Delphi (VCL), потом был C# (eXpressAppFramework) и вот уже 3 года я активно пишу на JavaScript/TypeScript. Cначала в команде DevExtreme, где я был одним из тим-лидеров, а с прошлого года я занимаюсь разработкой Web Report Designer.

Сергей: Меня зовут Сергей. Я преподавал в Тульском госуниверситете, работал в ИТ-подразделениях крупных комнаний, сейчас уже почти 6 лет работаю в DX. Начинал с C/C++ (MS Visual Studio, C++ Builder), в DX работал над проектом eXpressApp Framework, потом в команде DevExtreme, а сейчас занимаюсь HTML дизайнером для XtraReports Suite.

Кто в вашей команде? Как они появились?


Михаил: В самом начале наша команда состояла из меня, еще одного разработчика из DevExtreme и разработчика из команды Reports. Надо сказать, что исторически DX сильна в основном своими VCL, .NET и ASP.NET компонентами. Но мы с оптимизмом смотрим в будущее и не хотим отстать от поезда современного программирования, которым сейчас, безусловно, является HTML5 и всё, что с ним связано. Но, опять таки, оговорюсь, в основном у нас работают C# программисты. Сейчас мы хотим немного изменить этот дисбаланс.

Сергей: Я и есть “еще один разработчик из DevExtreme” :) Занимался там дизайнером форм, интеграцией с Visual Studio и PhoneGap контейнерами для нашего фреймворка.

Как решили использовать TypeScript?


Михаил: Про TypeScript я услышал на конференции РИТ++ 2012. Тогда это была одна из первых версий. Прямо скажем, это было сыровато и не было многих вещей, которые появились в следующих версиях. Но тем не менее, я пробовал его в небольших сэндбокс проектах и то, что получалось, мне нравилось.

Сергей: Фреймворк DevExtreme написан на JavaScript и шаблоны проектов для MS Visual Studio сначала также были только JavaScript-овые. Но в 2013 году некоторые наши пользователи стали просить сделать файлы определений .d.ts для нашего фреймворка и TypeScript-овые шаблоны проектов. Мы поддержали TypeScript и получили строгую типизацию и интеллисенс, что здорово помогло нашим клиентам при “вхождении” во фреймворк. Нам понравилось, как выглядел код в клиентских проектах. После этого нам самим захотелось использовать TypeScript.



Почему не использовали другие решения: CoffeeScript, например?


Михаил: Основными причинами по которым мы выбрали TypeScript были:
  1. Близкий к C# синтаксис.
  2. Хорошая интеграция с Visual Studio. Это скорее сугубо наше преимущество, так как я отмечал выше, все мы C# программисты, а это автоматически означает, что руки у нас заточены под «вижуалку».
  3. Многие вещи, присутствующие в языке, в скором времени войдут или уже вошли в EcmaScript6. JS-код после компиляции получается очень похожим на то, что было в TypeScript коде (Небольшой обзор нововведений: https://github.com/lukehoban/es6features — прим. интвервьювера).
  4. Достаточно гибкая система типизации и полная совместимость с JavaScript. Иными словами, можно выбирать, какая часть системы будет типизированной, а какая нет — и это позволяет делать очень гибкие решения, не доступные в том же C#.
  5. Microsoft stack.

Касаемо CoffeeScript. По тому, что я видел, это неплохая альтернатива TypeScript. Но сейчас у CoffeeScript я не вижу значительных преимуществ по сравнению с ним. И если базу кода TypeScript можно будет легко конвертнуть в EcmaScript 6, то сделать то же с CoffeScript проектом, я считаю, будет сделать намного сложнее.

Сергей: Я сначала скептически относился ко всем оберткам вокруг JavaScript. Для меня TypeScript показался более легким при вхождении. Возможно за счет близости синтаксиса к C#, возможности использования фрагментов кода JavaScript в TypeScript коде, близости результата трансляции к исходному тексту программы, что позволяет отлаживаться даже без map-файлов, если ваш код используется в каком-то другом месте. И, конечно же, типизация, интеллисенс и быстрые переходы по коду помогают в работе с большим проектом.

Правильно-ли я понял, что вы рассматриваете возможность отказаться от TypeScript с выходом и повсеместной реализацией стандарта EcmaScript6?


Сергей: Думаю, что существующие проекты переписывать смысла нет, а вот новый проект начать сразу на JavaScript EcmaScript6, если Visual Studio даст интеллисенс и проверку типов в редакторе — почему бы и нет. Я уже привык к этим плюшкам и отказываться не хочу.

Какая польза для вас, что TypeScript интегрирован в стек средств разработки Microsoft?


Михаил: Наши клиенты — это в основном разработчики, “сидящие” на Microsoft стеке. И если они и будут что-то использовать, то это вещь, которую рекомендует и продвигает Microsoft а ей без условно является TypeScript и нам надо было попробовать его, чтобы лучше понимать наших клиентов.

Сергей: Легко начать использовать TypeScript — он ставится даже на Visual Studio Express Edition. Ты просто добавляешь TypeScript файл в проект, и пишешь — больше ничего настраивать не надо. Ради интереса прикрутил TypeScript к Sublime — можно и так работать.

Какие трудности пришлось преодолеть?


Михаил: На самом деле, больших сложностей именно с TypeScript мы не испытывали. Возможно, только по началу, пока разрабатывали структуру проекта (что, где и как должно лежать). Но это из-за принципа: все когда-то происходит впервые.

Сергей: Пару недель привыкал к синтаксису TypeScript: руки набирали либо JavaScript, либо C# код.

Как отлаживаете и профилируете приложение?


Михаил: В деле отладки мы использовали композитный подход. А именно верстку — в основном, смотрели в Chrome, так как удобно. Там же и отлаживались. Благодаря map файлам всё происходит очень органично и не замечаешь того, что работаешь с TypeScript, а не JavaScript. Единственное, что иногда есть проблемы с обновлением исходников. Приходится чаще сохранять, чтобы код перегенерился. К чести Microsoft можно отнести очень быстрый компилятор начиная с версии 0.9.

Сергей: Приложение отлаживаем в Chrome, тесты, как мне кажется, удобнее отлаживать в IE + VisualStudio: можно вернулься на любую строчку назад или перескочить на пару строк вперед. Хотя в хроме тоже можно скоп перезапустить. При отладке в Chrome иногда map-файлы не поднимаются (иногда как раз в тот момент когда они больше всего нужны), но за счет читаемости результирующего JavaScript кода особых проблем это не создает.

Как тестируете код? Пишете тесты?


Михаил: У нас в компании TDD является обязательной методологией разработки кода. Поэтому все писалось по Test First-методологии, и надо отдать должное Knockout — очень помогает в этом вопросе. Т.е. сначала пишется верстка потом получаются биндинги которые определяют интерфейс вью модели. Далее мы пишем тесты на эту вью модель. Как-то так если вкратце. В качестве фреймворка для юнит-тестирования… Тут никаких сюрпризов: мы использовали QUnit. Continuous Integration у нас (куда ж без велосипедов) в DX свой, но с ним тоже не было проблем.

Сергей: QUnit + “qunit.TypeScript.DefinitelyTyped”

Используете какие-то расширения для Visual Studio?


Михаил: Мы использовали Web Essentials, который, как мне кажется, стандарт де-факто для тех, кто пишет что-то под HTML5, JavaScript.

Используете фреймворки? Как они интегрируются с TypeScript?


Михаил: Но куда же без jQuery :) Да, конечно, мы использовали ряд сторонних библиотек TS, описания которых без проблем можно найти в Nuget Packages Manager по ключевику TypeScript.DefinitelyTyped.

Сергей: Knockout.js, Globalize, WebApp.js. Определения для сторонних библиотек, которых нет в галерее Visual Studio, как правило, можно найти на GitHub. Например, определения распространенных контролов (типа select2 и ему подобных) там уже есть. Если уж и там не нашел, то достаточно легко написать себе нужный d.ts файл или, если совсем лень, то прикастить к any.

Как делали локализацию продукта?


Сергей: Использовали “Globalize.js”: добавили в проект nuget пакет “globalize.TypeScript.DefinitelyTyped” — и все.

Какие советы можете дать тем, кто решит написать проект на TypeScript?


Михаил: Пишите. Вам понравится.

Сергей: Пробуйте, сравнивайте. В сети есть ответы практически на все вопросы.
Developer Soft
74,95
Компания
Поделиться публикацией

Комментарии 18

    +4
    Там же и отлаживались. Благодаря map файлам всё происходит очень органично и не замечаешь того, что работаешь с TypeScript, а не JavaScript.

    Только хром часто норовит при остановке на брэйкпоинте открыть js файл и не показать где остановился (потому, что при наличии map-файлов он показывает бряку только в ts) — тогда приходится либо в стэке смотреть, либо руками открывать ts файл.
    Может это как-то лечится?
      +2
      Замечал что-то подобное. Мне обычно помогает дабл клик по текущему фрему в стеке: переходит на нужную строку.
        +6
        На моей практике (2-й проект на 100к+ строк кода, начиная с версии 0.8) оказалось удобнее вообще с map файлами не заморачиваться и отлаживать сразу js, т.к. код очень близок.
          +3
          вполне себе вариант. и полная уверенность, что отлаживаешь именно то, что исполняется в браузере.
      • НЛО прилетело и опубликовало эту надпись здесь
            0
            Мне вот непонятно как классы помогут сделать интеллисенс и проверку типов.
              +1
              Ну, например, есть четко определяемый список полей и методов, иерархия наследования и реализация интерфейсов. Компилятору это может очень многое подсказать.
                –2
                Классы — это просто другой синтаксис к старому-доброму class.prototype.method = function(). Интерфейсов никаких там нет, по понятной причине: JS динамически-типизированный.

                Короче никаких подвижек в сторону типизации в ES6 не будет.
          +6
          Использую TypeScript под Visual Studio с января. Сейчас у меня где-то 400кб кода на TS, пишу UI под react.js.

          В целом — must have. Интеллисенс, лямбды, статическая типизация — и всё почти бесплатно.

          Насчет «почти бесплатно»:
          — типизация, вывод типов и ошибки компилятора, иногда требуют заметного включения мозга чтобы понять что ему надо. Чтобы начать шарашить типизацию на полную, нужно учиться и привыкать. Но в любом случае можно дописать ':any' где TS делает непонятное.
          — у компилятора до 1.0.1 были серьезные проблемы с производительностью. Но и сейчас остаются косяки. Например, я клал компилятор в нокдаун конструкцией типа export var x = genericTypedFunctionFromOtherModule(). Обходится просто — не писать код, на котором виснет компилятор. Надеюсь в следующих версиях они это починят.
          — React.js пока не получается нормально типизировать. Экстраполируя — типизировать получается не всё что хочется.
          — небольшие проблемы с отладкой в хроме: не подсвечивается строка при остановке на брейкпоинте (после step over/клика по стеку — все ок); нельзя писать лямбды в консольке, а хочется :)

          Несмотря на эти минусы, плюсы их сильно перевешивают.
            +1
            Тоже использую TypeScript в продакшене и крайне доволен. Из неожиданных подводных камней запомнилась строчка инициализации списка объектов:

            _.forEach(items, i => i.isSelected = false);
            

            Много нервов было потеряно в попытках понять, почему код не работает. Истина оказалась на стыке услужливости компилятора TypeScript и гибкости библиотеки Lo-Dash: лямбда без скобок превращается в функцию с оператором return вне зависимости от содержимого, а итератор Lo-Dash прекращает перебор вариантов, когда callback явно возвращает false…

            В остальном согласен с остальными комментаторами: TypeScript еще не избавился от детских болезней, но писать на нем уже куда приятнее чем на JS.
              0
              Раз уж модифицируете исходный массив, используйте map, это должно решить все непонимания
              • НЛО прилетело и опубликовало эту надпись здесь
              0
              На мой взгляд, язык решает минимум две задачи:
              — низкий порог вхождения для шарповцев;
              — клиновая иерархия классов в сложном приложении.
              В тоже время, есть и обратная сторона, тем кто не любит MS Stack, придется прибегать к строгости языка, хотя и на чистом JS все прекрасно пишется, если правильно спроектировать объекты.
                0
                Основными причинами по которым мы выбрали TypeScript были:

                1. Близкий к C# синтаксис.


                Собственно, можно дальше не читать.
                  +3
                  Почему?
                    –3
                    Например, потому, что если бы не было этого пункта, то ожидалось бы больше технических причин с разборами и сравнениями с аналогиями, почему именно TS. А так — почему — близкий синтаксис, уже ясно, что это есть первопричина и особенно с тем же CS никто и не сравнивал.
                  0
                  Скажите а время компиляции транслирования в JS код уже наладили, а то я пол года назад начал на TS с gulp и watch плагином, но потом откатился на JS из за слишком долгого транслирования.

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

                  Самое читаемое