Понимание разницы между Typescript и JavaScript

Я получаю один из часто задаваемых вопросов: в чем разница между 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, @. # $% И т. Д. В переменную чувствительности.

Особенности JavaScript

Из вышесказанного мы можем наблюдать следующие особенности JavaScript:

• Слабо типизированный язык сценариев
• Используется для сценариев на стороне клиента и на стороне сервера (с node.js)
• Гибкий и динамичный
• Поддерживается всеми основными браузерами
• Легкий и понятный

Если вы заинтересованы в освоении JavaScript, ознакомьтесь с этим курсом Udemy.

Что такое TypeScript?

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

TypeScript строго типизирован и имеет компилятор, который жалуется, если вы не определяете тип переменной.

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

Установка TypeScript

Чтобы выполнить наш предыдущий код на TypeScript, нам нужно установить компилятор TypeScript с помощью пакета npm (если у вас есть node js).

 npm install -g typescript

или загрузите его прямо с официальной страницы загрузок Microsoft. Вы также можете использовать игровую площадку TS, чтобы увидеть, как код трансформируется из 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 может быть вашим естественным выбором. Вы открываете файл, вводите что-то внутри тегов <script></script> , сохраняете его как HTML - вы увидите результат! Затем вы можете использовать его для создания более динамичного контента.

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

Однако с точки зрения карьеры и заработной платы, как разработчик TypeScript, вы будете более гибкими и удобными как с проектами JS, так и с TS, что определенно станет лучшим активом на рынке. Обычно разработчикам TypeScript платят от 110 до 147 тысяч долларов, а разработчикам JS - от 63 до 118 тысяч долларов в год.