Стратегии перехода на TypeScript

Стратегии перехода на TypeScript

От автора: в этом посте приведен обзор стратегий для перевода баз кода с JavaScript на TypeScript. Также указаны дополнительные материалы.

Три стратегии перехода

Это три стратегии перехода на TypeScript:

Мы можем поддерживать для базы кода сочетание файлов JavaScript и TypeScript. Мы начинаем с файлов только JavaScript, а затем постепенно переключаем все на TypeScript.

Мы можем продолжать использовать обычный JavaScript и добавлять информацию о типах через комментарии JSDoc, пока все не будет полностью типизировано. В этот момент мы переключаемся на TypeScript.

Для больших проектов при переносе может возникнуть слишком много ошибок TypeScript. В этом случае могут помочь снэпшот-тесты для ошибок.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Дополнительная информация:

Переход с JavaScript в Руководстве по TypeScript

Стратегия: смешанные базы кода JavaScript / TypeScript

Компилятор TypeScript поддерживает сочетание файлов JavaScript и TypeScript, если мы используем параметр компилятора —allowJs:

Файлы TypeScript компилируются.

Файлы JavaScript просто копируются в выходной каталог (после нескольких простых проверок типов).

Сначала у нас есть только файлы JavaScript. Затем один за другим мы переключаем файлы на TypeScript. Пока мы это делаем, наша база кода продолжает компилироваться. Вот как выглядит tsconfig.json:

Дополнительная информация:

Стратегия: добавление информации о типах в обычные файлы JavaScript

Этот подход работает следующим образом:

Мы продолжаем использовать текущую инфраструктуру сборки.

Мы запускаем компилятор TypeScript, но только как средство проверки типов (опция компилятора —noEmit).

Мы добавляем через комментарии JSDoc информацию о типе (см. пример ниже) и файлы определения типа.

Как только средство проверки типов в TypeScript больше не выдает предупреждений, мы используем компилятор для создания базы кода (аналогично предыдущей стратегии). Переход от .js файлов к .ts файлам теперь не является актуальным, потому что вся база кода уже полностью статически типизирована. Теперь мы можем даже создавать файлы типов (расширение имени файла .d.ts).

Вот как мы указываем статические типы для простого JavaScript через комментарии JSDoc:

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Дополнительная информация:

Проверка типов файлов JavaScript в Руководстве по TypeScript

Как мы в Unsplash постепенно перешли на TypeScript от Оливера Джозефа Эша

Стратегия: перевод больших проектов путем снэпшот-тестированием для ошибок TypeScript

В больших проектах JavaScript переключение на TypeScript может вызвать слишком много ошибок — независимо от того, какой подход мы выберем. Затем можно выполнить снэпшот-тестирование ошибок TypeScript:

Мы в первый раз запускаем компилятор по всей базе кода.

Ошибки, выдаваемые компилятором TypeScript, становятся нашим начальным снэпшотом.

Работая над базой кода, мы сравниваем новый вывод ошибок с снэпшотом: иногда ошибки исчезают. Затем мы можем создать новый снэпшот. Иногда появляются новые ошибки. Затем мы должны либо исправить эти ошибки (если сможем), либо создать новый снэпшот.

Дополнительная информация:

Заключение

Мы кратко рассмотрели различные стратегии перехода на TypeScript. Еще два совета:

Начните переход с экспериментов: поэкспериментируйте с базой кода и опробуйте различные подходы, прежде чем выбрать один из них.

Затем изложите четкий план продвижения вперед. Поговорите с командой относительно приоритетов:

Иногда приоритетом может быть быстрое завершение миграции.

Иногда может иметь приоритет код, остающийся полностью функциональным во время миграции.

И так далее…

С чем вы столкнулись, когда вы перевели базы кода с JavaScript на TypeScript? Дайте нам знать в комментариях!

Автор: Dr. Axel Rauschmayer

Источник: https://2ality.com

Редакция: Команда webformyself.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

TypeScript

Посмотрите видео по TypeScript!

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий