От автора: в этом посте приведен обзор стратегий для перевода баз кода с JavaScript на TypeScript. Также указаны дополнительные материалы.
Три стратегии перехода
Это три стратегии перехода на TypeScript:
Мы можем поддерживать для базы кода сочетание файлов JavaScript и TypeScript. Мы начинаем с файлов только JavaScript, а затем постепенно переключаем все на TypeScript.
Мы можем продолжать использовать обычный JavaScript и добавлять информацию о типах через комментарии JSDoc, пока все не будет полностью типизировано. В этот момент мы переключаемся на TypeScript.
Для больших проектов при переносе может возникнуть слишком много ошибок TypeScript. В этом случае могут помочь снэпшот-тесты для ошибок.
Дополнительная информация:
Переход с JavaScript в Руководстве по TypeScript
Стратегия: смешанные базы кода JavaScript / TypeScript
Компилятор TypeScript поддерживает сочетание файлов JavaScript и TypeScript, если мы используем параметр компилятора —allowJs:
Файлы TypeScript компилируются.
Файлы JavaScript просто копируются в выходной каталог (после нескольких простых проверок типов).
Сначала у нас есть только файлы JavaScript. Затем один за другим мы переключаем файлы на TypeScript. Пока мы это делаем, наша база кода продолжает компилироваться. Вот как выглядит tsconfig.json:
{ "compilerOptions": { ··· "allowJs": true }
}
Дополнительная информация:
Поэтапный переход с JavaScript на TypeScript от Клэя Оллсоппа.
Стратегия: добавление информации о типах в обычные файлы JavaScript
Этот подход работает следующим образом:
Мы продолжаем использовать текущую инфраструктуру сборки.
Мы запускаем компилятор TypeScript, но только как средство проверки типов (опция компилятора —noEmit).
Мы добавляем через комментарии JSDoc информацию о типе (см. пример ниже) и файлы определения типа.
Как только средство проверки типов в TypeScript больше не выдает предупреждений, мы используем компилятор для создания базы кода (аналогично предыдущей стратегии). Переход от .js файлов к .ts файлам теперь не является актуальным, потому что вся база кода уже полностью статически типизирована. Теперь мы можем даже создавать файлы типов (расширение имени файла .d.ts).
Вот как мы указываем статические типы для простого JavaScript через комментарии JSDoc:
/** * @param {number} x - A number param. * @param {number} y - A number param. * @returns {number} This is the result */
function add(x, y) { return x + y;
} /** @typedef {{ prop1: string, prop2: string, prop3?: number }} SpecialType */
/** @typedef {(data: string, index?: number) => boolean} Predicate */
Дополнительная информация:
Проверка типов файлов JavaScript в Руководстве по TypeScript
Как мы в Unsplash постепенно перешли на TypeScript от Оливера Джозефа Эша
Стратегия: перевод больших проектов путем снэпшот-тестированием для ошибок TypeScript
В больших проектах JavaScript переключение на TypeScript может вызвать слишком много ошибок — независимо от того, какой подход мы выберем. Затем можно выполнить снэпшот-тестирование ошибок TypeScript:
Мы в первый раз запускаем компилятор по всей базе кода.
Ошибки, выдаваемые компилятором TypeScript, становятся нашим начальным снэпшотом.
Работая над базой кода, мы сравниваем новый вывод ошибок с снэпшотом: иногда ошибки исчезают. Затем мы можем создать новый снэпшот. Иногда появляются новые ошибки. Затем мы должны либо исправить эти ошибки (если сможем), либо создать новый снэпшот.
Дополнительная информация:
Как постепенно перевести 100k строк кода на Typescript от Дилана Ванна
Заключение
Мы кратко рассмотрели различные стратегии перехода на TypeScript. Еще два совета:
Начните переход с экспериментов: поэкспериментируйте с базой кода и опробуйте различные подходы, прежде чем выбрать один из них.
Затем изложите четкий план продвижения вперед. Поговорите с командой относительно приоритетов:
Иногда приоритетом может быть быстрое завершение миграции.
Иногда может иметь приоритет код, остающийся полностью функциональным во время миграции.
И так далее…
С чем вы столкнулись, когда вы перевели базы кода с JavaScript на TypeScript? Дайте нам знать в комментариях!
Автор: Dr. Axel Rauschmayer
Источник: https://2ality.com
Редакция: Команда webformyself.
