JavaScript или TypeScript: что учить первым и как выбрать для проекта
Автор: Казачкин Даниил Михайлович · Обновлено
TypeScript добавляет проверку типов к программам JavaScript, но не заменяет знания о выполнении JavaScript. Выбор первого языка удобнее связать с конкретной задачей: научиться…
TypeScript добавляет проверку типов к программам JavaScript, но не заменяет знания о выполнении JavaScript. Выбор первого языка удобнее связать с конкретной задачей: научиться объяснять поведение программы, затем научиться обнаруживать часть ошибок до её запуска.
Цель и необходимые знания
После урока вы сможете обосновать выбор JS или TS для небольшого проекта, отличить ошибку типов от ошибки бизнес-логики и составить план обучения без бесконечного изучения синтаксиса. Предполагается, что вы уже видели переменную, функцию и массив. Если эти слова пока незнакомы, сначала напишите несколько простых программ на JavaScript: расчёт стоимости, фильтр списка, обработку кнопки. Для этого урока браузерный интерфейс не нужен.
Два вопроса к одной программе
Рассмотрим сервис записи на занятия. Функция получает число участников и цену одного места. Первый вопрос: действительно ли вызывающая сторона передала числа? Второй: разрешает ли правило сервиса отрицательное количество участников? Это разные условия. Аннотация number помогает с первым, но сама по себе не отвечает на второй. Более того, NaN тоже относится к числам JavaScript. Хорошая программа выражает ограничения там, где они реально проверяются, вместо надежды на название языка.
Создайте example.ts в отдельной учебной папке. Основной пример можно выполнить в TypeScript Playground с включённым strict; для локальной проверки подойдёт TypeScript 6. Сначала прочитайте функцию и предскажите две строки вывода. Отдельная ветка if (false) служит только проверкой компилятора: содержащийся в ней неправильный вызов никогда не исполняется.
export {};
function reservationTotal(seats: number, price: number): number {
if (!Number.isInteger(seats) || seats < 1) {
throw new Error('Количество мест должно быть положительным целым');
}
return seats * price;
}
console.log(reservationTotal(3, 250));
try {
reservationTotal(-1, 250);
} catch (error: unknown) {
console.log(error instanceof Error ? error.message : 'Неизвестная ошибка');
}
if (false) {
// @ts-expect-error Строка не является количеством мест.
reservationTotal('3', 250);
}Вывод: сначала 750, затем Количество мест должно быть положительным целым. Ошибку со строкой ловит проверка типов; отрицательное число отклоняет обычный JavaScript-код внутри функции. Уберите комментарий @ts-expect-error, чтобы увидеть диагностику неправильного вызова. Затем исправьте строку на число: теперь сам комментарий станет лишним и компилятор сообщит об этом. Так проверяется, что учебный отрицательный пример действительно остаётся ошибочным.
Почему TypeScript не означает более быстрый код
При обычной компиляции аннотации исчезают. В итоговой функции остаются вычисление и проверка количества мест, а не отдельный механизм проверки параметра number. Скорость запроса определяется алгоритмом, вводом-выводом, объёмом данных и средой исполнения. TypeScript может помочь безопаснее переработать медленный алгоритм, но переименование файла из .js в .ts не уменьшает число операций и не ускоряет базу данных.
Похожая граница действует при чтении файла или ответа сервера. Объявленный интерфейс не заставляет другую систему прислать подходящий объект. Изменение внешнего формата нужно обнаружить в работающем приложении: проверкой полей, схемой или договорённостью с контролируемым источником. Этот навык пригодится независимо от того, какой язык вы выбрали первым.
Порядок обучения и критерий готовности
Начните с значений, функций, массивов, объектов, областей видимости и исключений JavaScript. Затем разберите асинхронную функцию на реальном примере: что она возвращает и где возникает ошибка. Не нужно ждать, пока вы запомните каждую особенность языка. Достаточно уметь объяснить небольшой работающий код и самостоятельно исправить неверный результат. После этого добавляйте TypeScript к тем же задачам: описывайте вход функции, варианты состояния и границы внешних данных.
Для одноразового сценария обработки знакомого файла JavaScript может быть разумным выбором. Для общего приложения с несколькими разработчиками TypeScript часто полезен как проверяемое описание взаимодействий. Решение зависит также от уже существующей кодовой базы и инструментов команды. Не стоит переписывать готовую программу только ради языка: сначала найдите повторяющиеся ошибки, оцените стоимость изменения и определите, как заметите улучшение.
Типичные ошибки
Первая ошибка — учить сложные преобразования типов до понимания обычных функций. Тогда сообщение компилятора воспринимается как головоломка без связи с поведением. Вторая — ставить any при каждой трудности: внешне проект остаётся типизированным, но важные проверки выключены. Третья — считать успешную сборку доказательством правильного расчёта. Наш пример показывает, почему неверная бизнес-формула может прекрасно соответствовать объявленному типу.
Практикум: решение для двух небольших продуктов
У вас две задачи: однократный скрипт подсчёта занятий в собственном файле и сервис записи, который поддерживают три человека. Для каждой запишите ожидаемый срок жизни, источник данных, частоту изменений и две вероятные ошибки. Затем предложите язык и проверки, которые действительно нужны. Не используйте аргумент «так современнее»: каждое решение должно опираться на наблюдаемую особенность задачи.
Разбор: в первом случае допустим короткий JS-скрипт с проверкой структуры входа и контрольной суммой результата. Во втором полезны типы вариантов записи, единые сигнатуры операций и автоматическая проверка всех потребителей при изменении полей. Но оба продукта должны проверять данные файла или запроса, если они могут оказаться неправильными. Дополните основную функцию правилом положительной конечной цены. Проверьте значения 250, 0 и NaN; все они имеют тип number, но только первое соответствует выбранному правилу.
Контрольная точка
Объясните без терминов компилятора, почему вызов с -1 прошёл проверку типов, но завершился ошибкой, а вызов со строкой был отвергнут заранее. Если объяснение сводится к «TS безопасный», вернитесь к двум отдельным вопросам о форме значения и правилах продукта.
Частые вопросы
Можно ли сразу учить TypeScript, минуя JavaScript?
Можно использовать TypeScript с первого учебного проекта, но изучение поведения JavaScript всё равно останется частью программы. Условие, замыкание, обещание и изменение объекта не становятся другими из-за аннотаций. Практичный маршрут — сначала разобраться с выполнением маленького примера, затем добавить к нему минимальные полезные типы.
Что показать на собеседовании вместо спора о лучшем языке?
Возьмите конкретную ошибку и покажите, где она обнаруживается: при проверке типов, тестировании расчёта или разборе входных данных. Объясните цену сопровождения выбранного решения. Такой ответ демонстрирует инженерное решение, тогда как обещание полной безопасности или автоматического ускорения легко опровергается небольшим примером.
Связанные исследования
- Что означает «TypeScript обнаруживает 15% ошибок»: критическое чтение исследования ICSE 2017 — Критический разбор ICSE 2017: 400 исторических ошибок, Flow 0.30 и TypeScript 2.0, обнаружимость 15%, ограничения метода и собственный протокол оценки пользы типов.