Случай добавления TypeScript в ваши приложения JavaScript

Случай добавления TypeScript в ваши приложения JavaScript

История

Несомненно, JavaScript является предпочтительным языком программирования для большинства веб-разработчиков и уже более двух десятилетий является «языком Интернета». На заре Интернета веб-сайты в основном представляли собой статические страницы с использованием HTML и некоторых базовых стилей; клиент делал запрос к серверу, и сервер отвечал этими статическими страницами. Однако многие ранние веб-разработчики хотели сделать эти веб-сайты более динамичными по своей природе.

Один конкретный человек, Марк Андриссен, основатель Netscape Communications, считал, что веб-сайты с анимацией и интерактивностью станут «сетью будущего». «Коммуникатор Netscape». Был необходим язык сценариев для внесения простых изменений в DOM (объектную модель документа), используемую статическими веб-сайтами; этот язык должен был быть простым в использовании и обслуживать людей, которые «проектировали», а не тех, кто «программировал». Пришел Брендан Эйх, который работал с Netscape над созданием «Mocha», который позже стал «LiveScript» и, наконец, «JavaScript». Многие функции JavaScript, известные сегодня, были заложены в язык с самого начала.

По мере того, как JavaScript развивался за многие годы веб-скриптинга, он расширил свою функциональность как язык, способный работать во многих других парадигмах, чем предполагалось изначально. К ним относятся: серверные приложения (node.js), мобильные приложения (React-Native) и даже настольные приложения (electron.js). По мере расширения этого когда-то простого языка всплыли многие присущие ему ограничения, что вызвало разочарование у тех, кто предпочитает работать с более «традиционными» языками программирования, такими как Java и C#; это еще более очевидно, когда серверные приложения корпоративного уровня создаются с использованием этих языков, а не JavaScript. Что такого особенного в этих языках программирования, что облегчает их использование многими программистами?

Ограничения JavaScript

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

Очень простой пример этого — когда математика выполняется над переменной, которая вводится в функцию:

const addNumbers = (num) => {
  return num + 1;
}

В JavaScript, если эта входная переменная является (или может быть) строкой, такой как «1», то это приведет к неожиданным результатам и даже не предупредит программиста о такой возможности до запуска программы. Хотя операторы «если» могут использоваться во многих местах для объяснения этого, это, безусловно, громоздкое решение, и определенно не предпочтительное решение для программистов JavaScript.

Входит TypeScript

Таким образом, возникает вопрос: как мы можем объединить более сложные функции, поддерживаемые многими другими языками (такие как эта безопасность типов), при этом используя знакомый синтаксис JavaScript? Именно здесь TypeScript стал основным выбором для многих будущих программистов на JavaScript. TypeScript — это надмножество JavaScript с открытым исходным кодом, созданное и поддерживаемое Microsoft. В приложении TypeScript этот же код будет записан так:

const addNumbers = (num: number): number => {
  return num + 1;
}

В этом конкретном примере для входной переменной «num» явно указано, что она должна иметь тип «number», который стоит после двоеточия. Второе «число» указывает, что возвращаемый тип функции должен быть числом. Если бы вы вызывали эту функцию в программе на TypeScript таким образом, что тип ввода не является числом или возвращаемое значение функции не используется как число, то перед компиляцией в ванильный JavaScript возникнет ошибка. . Кроме того, во многих IDE (интегрированных средах разработки) линтер фактически предупредит вас об этой ошибке, пока вы ее записываете.

Пример TypeScript: интерфейс

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

const person = {
  name: “Erin”,
};
return person.age.toString();

В этом случае мы вызываем ключ «возраст», который не содержится в объекте «человек». Если бы кто-то запустил этот код как есть, хотя IDE, скорее всего, не покажет эту ошибку, после его запуска можно было бы обнаружить распространенную ошибку:

TypeError: Cannot read property ‘toString’ of undefined.

При просмотре этого кода в этом примере для нас очевидно, что это произойдет. Однако что, если функция toString вызывается только на сервере Node или в приложении React? Программист никогда не увидит эту ошибку, пока эта функция не будет вызвана в пограничном случае, и в этот момент она уже создала плохой пользовательский интерфейс, если это не было обнаружено при тестировании. Это может особенно произойти, когда объекты манипулируются внутри функций. Интерфейсы TypeScript помогут решить проблему такого типа, позволив нам определить, как должен выглядеть «человек». Возьмите следующий код TypeScript:

interface Person {
  name: string,
  age: number
}
const erin: Person = {
  name: “Erin”
}
return erin.age.toString();

В этом случае, хотя линтер не обнаружит очевидную здесь ошибку toString, он сообщит нам, что в переменной «erin» отсутствует свойство «age;» ошибка будет выглядеть так:

Свойство «возраст» отсутствует в типе «{ имя: строка; }’, но требуется в типе ‘Person’.

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

Немного статистики

Давайте взглянем на один реальный пример использования TypeScript в крупной технологической компании. AirBnB — одна из таких компаний, которая использует TypeScript и его функции. Как видно на фотографии ниже, при анализе кода AirBnB было установлено, что они могут сократить количество ошибок примерно на 38%. Учитывая размер их кодовой базы, это значительный запас.

Возможно, важный вопрос, который следует задать в целом при изучении новой технологии, заключается в том, насколько она популярна в настоящее время, и насколько эта популярность будет расти и будет востребована. Не секрет, что TypeScript со временем становится все более популярным. Только за период с 2016 по 2018 год доля TypeScript в Google Trends выросла с 20,8% до 46,7%³.

Вывод

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

[1] Себастьян Пейротт. (16 января 2017 г.). Краткая история JavaScript https://auth0.com/blog/a-brief-history-of-JavaScript/

[2] Документация по TypeScript. https://www.typescriptlang.org/docs/handbook/interfaces.html

[3] Саурабх Барот. (19 июля 2019 г.). Почему разработчики любят использовать TypeScript в 2021 году? https://aglowiditsolutions.com/blog/why-use-TypeScript/#:~:text=Популярность%20of%20TypeScript,от%2020.8%25%20до%2046.7%25.