Разница между TypeScript и JavaScript: что добавляют типы и что учить первым
Разница между TypeScript и JavaScript сводится к одному добавленному слою. JavaScript — язык, который выполняют браузеры и Node.js, и типы в нём становятся известны только во время работы кода. TypeScript — это JavaScript плюс информация о типах, которую проверяющая программа читает до запуска. После проверки типы стираются, остаётся обычный JavaScript, поэтому TypeScript не меняет поведение программы.
Сравнение часто подают как выбор из двух языков. На деле оно ближе к выбору инструментов: TypeScript сохраняет синтаксис JavaScript и добавляет сведения для проверки. Разбор показывает, что эти сведения дают, где требуют усилий и в каком порядке учить оба языка.
Главные идеи
- Синтаксис JavaScript допустим в TypeScript; TypeScript добавляет правила о том, как можно использовать разные виды значений.
- TypeScript проверяет код до запуска, затем стирает типы и выдаёт обычный JavaScript.
- Деление 4 на пустой массив в JavaScript выполняется и выводит Infinity; TypeScript сообщает об этом как об ошибке заранее.
- Сначала учите JavaScript, а TypeScript добавляйте, когда переменные, функции, объекты и массивы станут привычными.
Что добавляет TypeScript
В JavaScript динамические типы: переменная не привязана к одному виду значений, поэтому в ней может лежать число, потом строка, потом логическое значение. Типизация также слабая: когда операция смешивает типы, значения тихо преобразуются, а не вызывают остановку. Число 42 плюс строка «1» даёт строку «421». Эти правила гибки, но из-за них часть ошибок доходит до работающей программы.
TypeScript добавляет статическую проверку: он читает код, не запуская его, и сообщает, где значения используются бессмысленным образом. Официальное руководство называет его типизированным надмножеством JavaScript, так что существующий синтаксис JavaScript остаётся допустимым. Многие типы писать не нужно, потому что TypeScript выводит их сам, например из текста, которым задана переменная.
Как TypeScript превращается в JavaScript
Браузеры и Node.js выполняют JavaScript, а не TypeScript. Компилятор tsc проверяет файл .ts и записывает обычный файл .js. На этом шаге типы стираются, так что в результате нет никакой информации о типах.
Как принцип, TypeScript никогда не меняет поведение JavaScript-кода во время выполнения: код, перенесённый из JavaScript в TypeScript, работает так же, даже если сообщается об ошибках типов. По умолчанию компилятор всё равно записывает файл JavaScript, когда находит ошибки; параметр noEmitOnError заставляет его остановиться.
Одна и та же маленькая задача в обоих языках
Возьмём функцию area, которая умножает ширину на высоту объекта-прямоугольника. В JavaScript вы пишете её, вызываете с объектом, у которого есть width и height, и она работает. Допустите опечатку heigth в одном свойстве, и во время правки никто не возразит: программа запустится, прочитает несуществующее свойство и выдаст неверный результат, часто далеко от места опечатки.
В TypeScript та же функция сообщает, что у её параметра есть width и height, оба числа. Проверка указывает на heigth до запуска и подсказывает height. Вызов area со строкой или с объектом без нужного поля отмечается так же. Тело функции остаётся прежним; нового здесь только описание типа и более раннее предупреждение.
Что учить первым
Руководство по TypeScript говорит об этом прямо: нельзя выучить TypeScript, не выучив JavaScript, потому что у них общие синтаксис и поведение во время выполнения. Начните с JavaScript: значения, переменные, функции, условия, циклы, объекты и массивы. К TypeScript переходите, когда сможете сами писать и отлаживать небольшие программы; тогда типы будут описывать то, что вам уже понятно.
В VITON13 SCHOOL есть два бесплатных курса для такого порядка — JavaScript и TypeScript, по 16 коротких уроков в каждом. Код запускается в браузере, а упражнения проверяются прямо на странице, так что заниматься можно, ничего не устанавливая.
Простыми словами
JavaScript — это письмо, отправленное без вычитки; TypeScript — то же письмо, которое перед отправкой прочитал строгий корректор. Получатель в обоих случаях видит те же слова.
Попробуйте сами
Откройте курс JavaScript и пройдите первый урок, запуская код в браузере, пока страница не отметит упражнение как выполненное.
Ожидаемый результат
Упражнение проверяется на странице, поэтому вы сразу видите, даёт ли ваш код ожидаемый результат.
Проверьте себя: В обычном JavaScript имя свойства написано с ошибкой: heigth. Когда вы об этом узнаете и когда сообщил бы TypeScript?
В JavaScript вы узнаете, только когда программа запустится и даст неверный результат. TypeScript сообщает об ошибочном свойстве при проверке, до запуска кода, и подсказывает height.
Вопросы и ответы
TypeScript быстрее JavaScript?
Во время выполнения типы ничего не меняют: TypeScript компилируется в обычный JavaScript и не меняет его поведение при выполнении. Выигрыш в том, что ошибки находятся раньше, а не в скорости работы.
Можно ли положить JavaScript-код в проект на TypeScript?
Да. Синтаксис JavaScript допустим в TypeScript, и перенесённый код работает так же. Проверка может сообщить в нём об ошибках типов, и они указывают места, на которые стоит посмотреть внимательнее.
Начните бесплатный курс JavaScript в VITON13 SCHOOL уже сегодня, пройдите его 16 уроков, а затем переходите к курсу TypeScript, чтобы добавить типы к тому, что вы уже знаете.
Источники и дальнейшее чтение
- TypeScript handbook: TypeScript for the New Programmer ↗Источники проверены:
- TypeScript handbook: The Basics ↗Источники проверены:
- MDN: JavaScript data types and data structures ↗Источники проверены: