В чем преимущества статической типизации TypeScript по сравнению с динамической типизацией JavaScript?

Что проверяют

Понимаете ли вы, какие ошибки TypeScript реально ловит и где его защита заканчивается. Следом часто спрашивают, что происходит с типами во время выполнения и как проверять данные, пришедшие с бэкенда.

Как отвечать

Суть статической типизации: типы проверяются до запуска, при сборке и прямо в редакторе, а в JavaScript ошибка вроде undefined is not a function всплывает уже у пользователя. Конкретные преимущества:

• ошибки до запуска: опечатка в имени поля, неверный аргумент, забытый await, из-за которого вместо данных приходит Promise;
• strict: true: включает strictNullChecks, и компилятор заставляет обработать null и undefined, самый частый источник падений;
• безопасный рефакторинг: переименовали поле или поменяли сигнатуру, и компилятор показал все места использования;
• размеченные объединения: type State = { status: 'loading' } | { status: 'error'; message: string } плюс проверка через never гарантируют, что новый вариант не забудут обработать в switch;
• контракты и подсказки: типы пропсов и ответов API служат документацией, автодополнение работает точнее.

Не менее важно назвать ограничения. Типы стираются при компиляции, в браузер уходит обычный JavaScript, поэтому ответ сервера, JSON.parse и localStorage на деле имеют тип, которому вы просто поверили. Такие данные проверяют в рантайме библиотекой вроде Zod или Valibot и выводят тип из схемы. any и приведения через as отключают проверку в конкретном месте. Цена: шаг сборки и время на описание типов, хотя современные сборщики и Node.js умеют просто вырезать типы без проверки.

Где спотыкаются

Говорят, что TypeScript ускоряет выполнение программы. На скорость в рантайме он не влияет, это инструмент разработки.

Утверждают, что с TypeScript ошибок типов в рантайме не бывает. Бывают, как только данные пришли снаружи без валидации или где-то стоит any.

Путают статическую типизацию со строгой. JavaScript динамический и со слабой типизацией, отсюда '5' - 2 === 3. TypeScript запретит такое выражение на этапе проверки, но семантику не меняет: скомпилированный код работает по правилам JavaScript.