Объяснение TypeScript. Понимание плюсов и выгод

Введение TypeScript

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

Как указано на официальном веб-сайте TypeScript, «TypeScript — это надмножество Javascript(ES6) с опциональной статической типизацией. Именно эти две особенности позволяют создавать масштабные приложения, сохраняя качество и упрощая разработку. TypeScript не является заменой JavaScript, он не добавляет никаких новых функций в JavaScript. TypeScriptпредоставляет разработчикам такие функции, как безопасность типов, проверка типов во время компиляции, объектно-ориентированные конструкции поверх JavaScript, в основном позволяет разработчикам мыслить объектно-ориентированными терминами при написании JavaScript. Самое удивительное в TypeScript то, что он компилируется на JavaScript, поэтому нам не нужно поддерживать какую-либо новую виртуальную машину для запуска TypeScript, на который затем можно ссылаться на веб-странице, которая используется на стороне сервера, как в NodeJS.

TypeScript — это открытый исходный код, разработанный Microsoft, но никоим образом не привязанный к платформе Microsoft и может использоваться в любом месте в любой среде, где есть необходимость писать JavaScript. Хотя Microsoft действительно обеспечивает отличную поддержку TypeScript в Visual Studio, и мы будем использовать Visual Studio для наших примеров, но мы также можем использовать компилятор TypeScript из командной строки для компиляции TypeScript в JavaScript.

Модуль

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

Интерфейс

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

Классы

Концепция классов снова очень похожа на мир .NET / Java. Классы содержат переменные, свойства и методы, которые образуют одну логическую сущность. TypeScript также позволяет задавать область видимости переменной и функций с помощью таких ключевых слов, как «private» и «public», хотя эта область не влияет на сгенерированный JavaScript.

Функции

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

Переменные

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

Однако TypeScript — это типизированное надмножество, что означает, что он добавляет правила использования различных типов значений. Более ранняя ошибка, связанная с obj.heigth, не была синтаксической ошибкой: это ошибка неправильного использования какого-либо значения (типа).

В качестве другого примера, это код JavaScript, который вы можете запустить в своем браузере, и он напечатает значение:

console.log(4 / []);

Эта синтаксически легальная программа печатает Infinity. TypeScript, однако, считает деление числа на массив бессмысленной операцией и выдаст ошибку:

console.log(4 / []);

The right-hand side of an arithmetic operation must be of type ‘any’, ‘number’, ‘bigint’ or an enum type.

Возможно, вы действительно намеревались разделить число на массив, возможно, просто для того, чтобы посмотреть, что произойдет, но в большинстве случаев это ошибка программирования. Средство проверки типов TypeScript разработано, чтобы позволить исправлять программы, при этом вылавливая как можно больше распространенных ошибок. (Позже мы узнаем о настройках, которые можно использовать для настройки того, насколько строго TypeScript проверяет ваш код.) Если вы переместите код из файла JavaScript в файл TypeScript, вы можете увидеть ошибки типа в зависимости от того, как написан код. Это могут быть законные проблемы с кодом или слишком консервативный TypeScript.