Один из часто задаваемых вопросов, которые я получаю: в чем разница между JavaScript и Typescript?
Давай выясним…
С того момента, как вы начали программировать, JavaScript (JS) стал частью всех ваших интерфейсных проектов. Если вы немного знакомы с JS, думайте о TypeScript как о JS плюс некоторые дополнительные функции, которые делают ваше приложение более аккуратным и типизированным. TypeScript был разработан Microsoft как проект с открытым исходным кодом, чтобы сделать разработку JS более эффективной и выявить ошибки компиляции на раннем этапе.
В этой статье мы обсудим некоторые важные особенности JavaScript и TypeScript, а также различия между ними.
Оглавление
Что такое JavaScript?
JavaScript используется для сценариев на стороне клиента. Вы можете создать сценарий на HTML-странице или создать файл с расширением .js и включить его в свой HTML-файл. Типичным реальным примером, где вы можете увидеть JavaScript, является проверка страницы входа, где вам показывают ошибку, когда ваше имя пользователя/пароль неверно.
Давайте напишем простой JS-код и запустим его в браузере:
Создайте файл example.html и добавьте следующий код:
<script> feeling = 'happy'; feeling = 23; </script>
Этот простой код объявляет переменную и присваивает ей значение happy (строка). Мы можем присвоить той же переменной значение другого типа (числа). JavaScript не будет жаловаться на это, и мы можем без проблем запускать код в любом браузере. Теперь давайте получим значение чувства от пользователя:
Наш HTML будет выглядеть так:
<input type = "textbox" id = "howyoufeel">
а скрипт будет такой:
feeling = document.getElementById("howyoufeel").value;
Если мы не поместим в скрипт явные проверки, JS примет любое значение от пользователя и передаст его дальше. Таким образом, вы можете поместить что-нибудь вроде 234, @.#$% и т. д. в переменную feel.
Особенности JavaScript
Из вышеизложенного мы можем наблюдать следующие особенности JavaScript:
- Слабо типизированный скриптовый язык
- Используется для сценариев на стороне клиента и на стороне сервера (с node.js).
- Гибкий и динамичный
- Поддерживается всеми основными браузерами
- Легкий и интерпретируемый
Если вы заинтересованы в освоении JavaScript, ознакомьтесь с этим Удеми курс.
Что такое TypeScript?
Реальное приложение будет иметь множество проверок и динамических проверок. Для таких приложений код JavaScript в какой-то момент станет трудно тестировать, в основном из-за отсутствия проверки типов. Получая значения от пользователей, важно получить их правильно с самого начала. Здесь на помощь приходит TypeScript.
TypeScript строго типизирован и имеет компилятор, который ругается, если вы не определяете тип переменной.
И JavaScript, и TypeScript соответствуют спецификациям ECMAScript для языка сценариев. Typescript может запускать весь код JavaScript и поддерживает все его библиотеки — поэтому его называют надмножеством JavaScript.
Установка TypeScript
Чтобы выполнить наш предыдущий код на TypeScript, нам нужно установить компилятор TypeScript с помощью пакета npm (если у вас есть node js).
npm install -g typescript
или скачайте прямо с официального Страница загрузок Майкрософт. Вы также можете использовать ТС детская площадка чтобы увидеть, как код транскомпилируется из ts в js.
Как только это будет сделано, вы можете настроить параметры проекта в tsconfig.json и использовать любую IDE или текстовый редактор, чтобы написать код TypeScript и сохранить его как .ts.
Вы все еще можете уйти, не определяя тип переменной, и TypeScript может вывести тип данных. Однако вы получите «ощущение» ошибки, если укажете что-либо, кроме первого использованного типа (в нашем случае String) — во время самой компиляции.
Всегда полезно иметь в коде аннотацию типа для удобства сопровождения и простоты использования:
var feeling: string = “happy”;
Это не то!
TypeScript предоставляет множество других функций, облегчающих жизнь разработчика.
Особенности TypeScript
Typescript имеет богатый набор функций, и каждый выпуск поставляется с новыми функциями, которые упрощают разработку, чем раньше. Например, в новой версии (4.0) некоторые дополнительные функции являются вариативными типами кортежей, пользовательскими фабриками JSX, выводом свойств класса из конструкторов и т. д. Вот некоторые типичные особенности TypeScript:
- Поддерживает концепции объектно-ориентированного программирования, такие как интерфейс, наследование, класс. дженерики
- Раннее обнаружение ошибок
- Поддержка IDE с проверкой синтаксиса и предложениями
- Легче отлаживать по мере ввода
- Транскомпилирует в JavaScript
- Используется как для серверных, так и для клиентских приложений.
- Кроссплатформенная и кроссбраузерная поддержка
- Поддерживает все библиотеки и расширения JS.
Зачем нам нужен TypeScript? (Преимущества TypeScript перед JavaScript)
Microsoft разработала и использовала TypeScript в течение двух лет для своих внутренних проектов, прежде чем сделать его общедоступным в 2012 году. Они создали типизированный JavaScript, потому что было проще тестировать код для корпоративных приложений производственного уровня. Вы по-прежнему можете использовать функции динамической типизации, а также вводить переменные, когда это действительно необходимо.
Рассмотрим приведенный ниже код:
var mynum = //get from user;
addten(number){
return number + 10;
}
Мы ожидаем, что результатом всегда будет число. Но что, если пользователь дает «овец»? На выходе будет овца10 — в идеале нам нужно сообщить пользователю, что эта операция невозможна!
Кроме того, когда у вас есть доступная информация о типе, текстовые редакторы и IDE становятся более удобными для использования и сохранения ошибок времени выполнения. Также легче рефакторить код в более поздний момент времени.
Значит ли это, что нам не нужен JavaScript? (Недостатки TypeScript по сравнению с JavaScript)
Вы можете думать о TypeScript как о расширении JavaScript, но уж точно не как о его замене.
Для небольших фрагментов кода TypeScript может стать накладным расходом — установка, компиляция, транскомпиляция будут излишними. С помощью JavaScript вы можете просто ввести свой сценарий в HTML, и он будет работать. Также легче отлаживать код, когда вы можете просто обновлять браузер каждый раз, когда что-то меняете.
Прямое сравнение
Теперь, когда мы поняли особенности и преимущества как TypeScript, так и JavaScript, давайте проведем дополнительные сравнения:
Машинопись
JavaScript
Типизированный язык, который отлавливает ошибки компиляции на ранней стадии.
Вы можете узнать ошибки во время выполнения
Подходит для крупных проектов, так как улучшает удобство сопровождения и читабельность кода.
По мере добавления кода его становится сложно тестировать и отлаживать, поэтому JS подходит для небольших проектов.
Расширенный набор JS, т. е. такие функции, как объектная ориентация, проверка типов и многое другое.
Язык сценариев, поддерживающий создание динамического веб-контента.
Требуется установка компилятора и настройка конфигурации
Нет необходимости в какой-либо установке; Код JS можно написать напрямую в браузере с помощью тега , сохраняете его как HTML — и вы увидите результат! Затем вы можете использовать его для создания более динамичного контента.
Кроме того, когда вы работаете над крупномасштабным приложением, знание JavaScript поможет вам легко перейти на TypeScript.
Однако с точки зрения карьеры и заработной платы, как Разработчик TypeScript, вы будете более гибкими и удобными как с проектами JS, так и с TS — так что, безусловно, это лучший актив на рынке. Обычно разработчикам TypeScript платят от 110 до 147 тысяч долларов, тогда как разработчикам JS платят от 63 до 118 тысяч долларов в год.