Если вы разработчик JavaScript (при условии, что алгоритм Medium работает правильно, я на это надеюсь…), возможно, вы уже слышали о TypeScript.

Или, может быть, вы быстро окунулись в это, но достоинства не сразу очевидны.

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

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

Я надеюсь, что эта статья сможет:

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

Начнем с примера. Найдите ошибку в этом коде JavaScript:

Вы это заметили? Это довольно распространенная ошибка - наша функция multiply умножает переданное число на два ... но мы передали ему строку.

Мы не можем умножить строку!

Что еще хуже, мы очень легко могли пропустить эту ошибку. В конце концов, когда мы запускаем этот JavaScript - возможно, встроенный как часть веб-сайта или приложения Node.js, myNumber будет просто NaN .

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

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

Хорошо, я заинтригован. Покажи мне несколько примеров!

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

Пример 1: сложение двух чисел

JavaScript:

Машинопись:

Пример 2: получение первой буквы слова

JavaScript:

Машинопись:

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

Я объясню чуть более подробно через минуту, но сначала рассмотрим более сложный пример:

Пример 3: Создайте новый объект, затем получите доступ к его значению

JavaScript:

Машинопись:

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

Бесстыдная самозарядка

У меня есть бесплатный видеокурс Введение в TypeScript, доступный на моем канале YouTube!

Я буду загружать новые части на свой канал каждую среду, но если вы не хотите ждать, вы можете посетить CodeSnap.io, чтобы загрузить и сразу же все это разложить .

Хорошо, вернемся к статье…

TypeScript - это (не так) втайне просто JavaScript

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

И в этом престиж. В конце концов, TypeScript компилируется в простой старый JavaScript.

Файлы TypeScript записываются с расширением файла .ts , а JavaScript записывается с расширением файла .js . Современные браузеры не могут понимать файлы TypeScript в их исходной форме. Итак, нам нужно превратить его в то, что он может понять - JavaScript!

Здесь на помощь приходит компилятор TypeScript.

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

tsc -w ./index.ts — outFile ./index.js

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

Раннее обнаружение ошибок

Давайте возьмем этот пример JavaScript из верхней части этой статьи:

… И давайте запишем, как это будет выглядеть в TypeScript…

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

tsc ./index.ts — outFile ./index.js

      

       Uh-oh. This can’t be good.
      

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

Эй смотри! Ошибок нет!

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

Резюме

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

Более того; почти все основные интерфейсные фреймворки (React.js, Vue, Angular) в настоящее время поддерживают TypeScript - то же самое и с бэкэнд-фреймворками. Вы сможете написать свой TypeScript, используя новейшие функции JavaScript, но разверните JavaScript, который работает практически везде!

Это все для введения, но в ближайшие недели я опубликую больше статей о TypeScript.

А пока, если вы хотите узнать больше о TypeScript, мой видеокурс «Введение в TypeScript» будет загружен на мой канал YouTube в течение следующих нескольких месяцев (новые части каждую среду!). В нем есть практически все, что я упомянул здесь, в первых двух видеороликах - а всего курс насчитывает шестнадцать видеороликов.

Если вы хотите проверить курс на YouTube, список воспроизведения доступен здесь , или, если вы предпочитаете загрузить и разложить все это целиком, вы можете скачать его здесь.

Большое спасибо за чтение - удачной работы с TypeScript!