JavaScript – это один из самых популярных языков программирования в среде веб-разработчиков. Код, написанный с его помощью, должен корректно работать в любой предсказуемой ситуации. В противном случае весь функционал сайта или приложения “посыпеться”. Чтобы этого избежать в код добавляют огромное количество проверок и/или обширные комментарии. Однако, в первом случае все получается слишком громоздким, а во втором случае застраховаться от ошибок все равно не получается.

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

Что такое TypeScript

TypeScript – это отдельный язык программирования, основанный на JavaScript, поэтому его стоит воспринимать скорее как надстройку для лучшей работы JS, а не как полностью независимый язык. Отличается от своего прародителя строгой типизацией. Первые версии TypeScript появились в 2012 году. Он постоянно совершенствуется – текущая актуальная версия 4.6.3 от 2022 года.

Сам TypeScript состоит из трех частей:

  • основной синтаксис языка программирования;
  • компилятор кода;
  • редактор кода.

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

Решение задачи можно элегантно выразить в файлах формата .ts или .tsx благодаря упрощенному синтаксису TypeScript. Он полностью совместим с JavaScript-приложениями, поэтому любая JS-программа будет корректна с точки зрения синтаксиса для TypeScript (и наоборот).

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

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

Пример использования проверок TypeScript

Часто для проверки кода на ошибки в JavaScript используется оператор try catch. Внутри него генерируется сообщение с информацией об обнаруженной ошибке. Примечательно, что сообщение может принимать любой тип – строку, число или даже объект. Такой подход не всегда позволяет сходу определить ошибку и степень ее критичности. Например, не всегда информация в блоке типа Error содержит данные об ошибках. Разработчику часто остается опираться на опыт и догадки, что замедляет работу над всем проектом.

Комилятор TypeScript по умолчанию самостоятельно проверяет значение catch на обнаруженные ошибки. Вот пример условий подобной проверки:

catch(err){
console.log(err.message)
}

Если в консоли будет выведено число 42 у пункта err, значит, что в ходе проверки была обнаружена ошибка. Вы можете отключить автоматическую проверку компилятором содержимого блока catch.

В компиляторе предусмотрен флаг useUnknownInCatchVariables, который запрещает проверки методом catch. Часто применяется, чтобы предотвратить аварийное завершение работы программы. Дело в том, что при обнаружении некоторых ошибок во время автоматического тестирования может происходить закрытие программы. В таких случаях разработчику придется самому искать и устранять подобные критические сбои.

Поддержка TypeScript редакторами кода

Большинство распространенных редакторов кода поддерживают работу с TypeScript. К ним относятся VS Code, Atom, WebStorm, SublimeText. Существует также онлайн-редактор кода TS Playground, предназначенный для знакомства с TSC и его изучения. Писать на нем полноценные проекты не получится. У песочницы ограниченные возможности в плане запуска полученного JavaScript. Однако к коду можно подключать модули из npm, изучить назначения флагов компилятора, рассмотреть полученный JavaScript и текст определения модуля (.d.ts).

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

Причины перейти на TypeScript

Сейчас этот язык используется в крупных проектах. Например, редактор кода VS Code, на котором работает большинство разработчиков, написан на TS. Также на нем написана технология Angular, которая тоже очень популярна в среде веб-разработчиков. TypeScript развивается и поддерживается Microsoft. Помимо этого есть и другие, более серьезные причины, начинать изучение TS.

Причина 1: Легкость в изучении

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

Причина 2: Используется меньше Unit-тестов

Для корректно работающего JS-кода, если речь идет о большом проекте, требуется регулярно писать unit-тесты. В противном случае вы можете не обнаружить какую-то ошибку. Примерно 10-20% JS-кода крупного проекта – это разного рода тесты. Естественно, времени на их написание, в процентном соотношении от потраченного на разработку, уходит еще больше.

Прописывание условий для проверки в JavaScript делает код более громоздким и увеличивает время написания

Еще одна проблема JavaScript, которая как раз и усложняет тестирование – наличие строгой типизации данных. В unit-тестах требуется быть уверенным, что функция показывает корректную информацию, отбрасывая неопределенные аргументы, данные без значений, строки и подобный “мусор”. В TypeScript мало того, что некоторые тесты встроены в сам язык, так еще вам проще работать с типами данных. Например, можно указать не только явно числовой тип a, b к результату, но еще и их значения как nullable.

Причина 3: Удобный TSC-инструментарий

TSC – расшифровывается как “TypeScript compiler”. Это простейший инструмент, включенный в сам язык программирования и работающий в любом редакторе, вне зависимости от наличия поддержки синтаксиса TypeScript. Задача инструмента tsc произвести компиляцию файлов с расширением .ts в расширение .js.

Чтобы начать работу с TypeScript, нужно:

  • Открыть терминал вашего редактора кода. Туда ввести и применить команду npm install –global typescript. Она отвечает за установку TypeScript в систему. Если установка требуется только в конкретный проект, а не всю систему, то просто уберите слово “-global” из команды.
  • Создайте первый файл с расширением .ts. “Наполнить” его можно любыми командами. Для примера запишим простой console.log.
  • В терминал своего редактора кода введите команду tsc для компиляции файла.

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

Пример записанной команды

При попытке компиляции вы получите сообщение о некорректном типе аргумента. Таким образом можно легко обнаруживать подобные ошибки во время компиляции ts-файлов в js. Никакие дополнительные тесты или долгая самостоятельная проверка написанного кода для этого не требуется.

Сообщение об ошибке типа данных

Дополнительно TypeScript предоставляет множество конфигураций для кастомизации вашего рабочего процесса. Пример одной из гибкой конфигурации на скриншоте ниже:

Пример файла с расширенной конфигурацией

Меняя значения true-false, вы можете настраивать рабочую среду TypeScript под себя. Дополнительно к этой конфигурации можно добавить еще два свойства:

  • include. Оно отвечает за автоматическое указание местоположения исходников, а также прописывания структуры местоположения выходных файлов. Если теперь вы положите файл test.ts в папку src/, рядом с другими ts-файлами, то запустив tsc без аргументов, получите похожую структуру с другими файлами в папке. Есть возможность включить отслеживание и обновление при изменении файлов. Для этого используйте tsc – watch;
  • exclude. Отвечает практически за все то же самое, но ориентируется больше на выходные файлы. В свойства прописывается, куда по умолчанию должны помещаться эти файлы, например, “dist”.

Причина 4: Более удобная типизация данных

Чтобы задать переменной тип, просто поставьте после нее знак “:” и напишите нужный тип, например, string. Если в переменную попадут данные, не относящиеся к заданному типу, то вы получите об этом уведомление. Так вам будет проще отслеживать возможные ошибки в ходе выполнения кода или взаимодействия с ним потенциального пользователя. Еще вы можете указать тип функции и возвращаемого значения.

Указание типа данных переменной в TS

Упростить работу с типизацией данных можно с помощью свойства “strictNullChecks”. В конфигурационном файле включите его, поставив напротив данного свойства значение true. После этого можно будет получать комментарии к каждой переменной, в зависимости от того, соответствует ли ее значение ранее заданному типу.

В TypeScript можно указывать и не указывать типы данных. Вопрос, а как узнать, когда их требуется указывать заранее, а когда нет? Часто можно встретить мнение, что строгая типизация, по аналогии с Java и C необходима при написании кода на TypeScript. На самом деле это дело личных предпочтений и удобства. С одной стороны “тотальная” типизация позволяет избежать некоторых ошибок, но с другой стороны требует больше времени на написание кода, а также может привести к появлению объявлений в 3-4 строки. Плюс, объявление типов усложняет читаемость кода человеком – слишком много информации в одной строке.

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

Причина 5: Удобное разделение проектов

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

Во время выполнения команды npm install, происходит автоматическое создание папки @types, которая находится в директории node_modules. В ней также создается файл .d.ts. В нем как раз и происходит детальная настройка конфигураций под конкретный проект. Вся основная структура файла уже сгенерирована. От вас остается только внести в нее необходимые правки.

Причина 6: Использование продвинутой типизации

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

Можно создать собственный тип данных с собственными условиями. Например, тип интерфейс. В нем укажите типы, которые будут сразу же применяться к определенным переменным, например, name, email и так далее. Подробно этот пример показан на скриншоте ниже.

Пример задания пользовательских типов

Еще одна интересная особенность – объединение типов данных с помощью соответствующего оператора – “|”. Пример подобного объединения:

let a : number | string

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

Дополнительно поддерживается перегрузка.

Роль TypeScript в работе разработчика

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

Убедиться в отсутствии противоречий и нестыковок во время исполнения программы на TypeScript проще, чем на JavaScript. В первую очередь это возможно за счет более расширенной работы с типами – можно задать тип для любой переменной и получать предсказуемые результаты. Вот весь перечень полезных задач, которые TypeScript выполняет для разработчика:

  • позволяет разработчику использовать определенный тип для той или иной переменной;
  • контролирует корректность использования выбранного значения переменной, исходя из ранее присвоенного типа;
  • сообщает об ошибках в использовании операций, присвоении данных, прямо в редакторе кода;
  • дает возможность использовать методологии ООП;
  • позволяет делать модули разного формата;
  • позволяет кастомизировать рабочую среду под конкретный проект;
  • TypeScript интегрируется в такие среды как Babel, Browserify, Grunt, Gulp, Jspm, MSBuild, NuGet, Rollup, Svelte Compiler, Vite, Webpack.

Заключение

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