Новости

Работая с любым языком программирования, мы отслеживаем исключения и вычитываем код строку за строкой в поиске неисправности и способа ее устранения. TypeScript позволяет автоматизировать эту неприятную часть процесса разработки.

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

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

Структура книги

Я (автор) постарался передать вам теоретическое понимание работы TypeScript и достаточное количество практических советов по написанию кода.

TypeScript — практический язык, поэтому в книге теория и практика в основном дополняют друг друга, но в первых двух главах преимущественно освещается теория, а ближе к концу представлена только практика.

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

Большинство глав завершаются набором упражнений. Попробуйте выполнить их самостоятельно, чтобы лучше усвоить материал. Ответы к ним доступны по адресу https://github.com/bcherny/programming-typescript-answers.

Поэтапная миграция из JavaScript в TypeScript

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

На высоком уровне кодовая база должна быть полностью написана в TypeScript и строго типизирована, а сторонние библиотеки JavaScript, от которых вы зависите, должны быть хорошего качества и иметь собственные строгие типы. Процесс написания кода ускорится вдвое благодаря перехвату ошибок во время компиляции, а также богатой системе автозаполнения TypeScript. Чтобы достичь успешного результата миграции, потребуется совершить несколько небольших шагов:

• Добавить TSC в проект.
• Начать проверку типов имеющегося кода JavaScript.
• Перенести JavaScript-код в TypeScript файл за файлом.
• Установить декларации типов для зависимостей. То есть выделить типы для зависимостей, которые их не имеют, либо прописать декларации типов для нетипизированных зависимостей и отправить их обратно на DefinitelyTyped1.
• Включить для базы кода режим strict.

Этот процесс может занять некоторое время, но вы сразу обнаружите прирост безопасности и производительности, а также откроете и другие преимущества позже. Рассмотрим перечисленные шаги.

Шаг 1: добавление TSC

При работе с базой кода, объединяющей TypeScript и JavaScript, сначала позвольте TSC компилировать JavaScript-файлы вместе с файлами TypeScript в настройках tsconfig.json:

Одно это изменение уже позволит использовать TSC для компиляции кода JavaScript. Просто добавьте TSC в процесс сборки и либо запустите через него каждый файл JavaScript, либо продолжайте запускать устаревшие файлы JavaScript через процесс сборки, а новые файлы TypeScript —через TSC.

При allowJs, установленном как true, TypeScript не будет проверять типы в текущем коде JavaScript, но будет транспилировать этот код в ES3, ES5 или в версию, которая установлена как target в файле tsconfig.json, используя систему модулей, запрошенную вами (в поле module файла tsconfug.json). Первый шаг выполнен. Сделайте его коммит и похлопайте себя по плечу — теперь ваша кодовая база использует TypeScript.

Шаг 2a: активация проверки типов для JavaScript (по желанию)

Теперь, когда TSC обрабатывает код JavaScript, почему бы не проверить его типы? Даже если там нет явных аннотаций типов, вспомните, что TypeScript может вывести типы для JavaScript-кода так же, как и для кода TypeScript. Включите необходимую опцию в tsconfig.json:

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

Если ваша база кода велика и при включении checkJs обнаруживается слишком много ошибок за раз, выключите ее. Вместо нее включите проверку файлов JavaScript по одному, добавив директиву // @ts-check (обычный комментарий в верхней части файла). Либо, если большие файлы выбрасывают кучу ошибок, которые вы пока не хотите исправлять, оставьте включенной checkJs и добавьте директиву // @ts-nocheck именно для этих файлов.

TypeScript не может вывести типы для всего (например, не выводит типы для параметров функций), поэтому он выведет множество типов в JavaScript-коде как any. Если у вас включен режим strict в tsconfig.json (рекомендую), то вы можете предпочесть на время миграции разрешить неявные any. Добавьте в tsconfig.json следующее:

Не забудьте снова включить noImplicitAny, когда завершите миграцию основной части кода в TypeScript. При этом, скорее всего, будет обнаружено множество упущенных ошибок (если только вы не Зенидар — послушник JavaScript-ведьмы Бавморды, который может проверять типы силой мысленного взора с помощью зелья из полыни).

Когда TypeScript выполняет код JavaScript, он использует более мягкий алгоритм вывода, чем в случае с кодом TypeScript. А именно:

• Все параметры функций опциональны.
• Типы свойств функций и классов выводятся на основе их использования (вместо необходимости быть объявленными заранее):

• После объявления объекта, класса или функции вы можете присвоить им дополнительные свойства. За кадром TypeScript делает это посредством генерирования соответствующего пространства имен для каждой декларации функции и автоматического добавления сигнатуры индекса каждому объектному литералу.

Шаг 2б: добавление аннотаций JSDoc (по желанию)

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

Вы, вероятно, встречали JSDoc ранее. Это такие комментарии в верхней части кода с аннотациями, начинающимися с @, вроде @param, @returns и т. д. TypeScript понимает JSDoc и использует его в качестве вводных данных для модуля проверки типов наравне с явными аннотациями типов.

Предположим, у вас есть служебный файл на 3000 строк (да, знаю, его написал ваш «друг»). Вы добавляете в него новую сервисную функцию:

Без полноценного преобразования utils.js в TypeScript, которое наверняка вскроет кучу багов, вы можете аннотировать только функцию toPascaleCase, создав маленький островок безопасности в море нетипизированного JavaScript:

Без этой аннотации JSDoc TypeScript вывел бы тип toPascaleCase как (word: any) => string. Теперь же при компиляции он будет знать, что тип toPascaleCase — это (word: string) => string. А вы при этом получите полезное документирование.

Для более подробного ознакомления с аннотациями JSDoc посетите ресурс TypeScript Wiki (https://github.com/Microsoft/TypeScript/wiki/JSDoc-support-in-JavaScript).

С полным содержанием статьи можно ознакомиться на сайте "Хабрахабр":

https://habr.com/ru/company/piter/blog/522238/