Орта Терокс в блоге Svelte написал статью о поддержке TypeScript — "Svelte ❤️ TypeScript".

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

Поддержку TS можно включить с помощью установки необходимых пакетов и добавления атрибута lang="ts" в script. Ручную проверку типов можно запустить с помощью svelte-check. В редакторах поддерживается автодополнение кода и проверка типов в том числе внутри разметки.

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

#svelte #typescript #jsframeworks

https://svelte.dev/blog/svelte-and-typescript

Джошуа Голдберг в своём блоге задокументировал процесс добавления новой фичи в TypeScript — "TypeScript Contribution Diary: // @ts-expect-error".

Джошуа добавил поддержку новой директивы // @ts-expect-error в TypeScript 3.9. С её помощью можно подавить конкретные ошибки компилятора. В статье очень подробно рассказывается, как была добавлена эта фича, что было изменено, почему это было сделано именно так, с какими проблемами столкнулись пользователи после релиза RC-версии, какие были фиксы и т.п. Например, в начальной реализации для JSX не учитывался случай использования директивы игнорирования ошибок подобным образом:

{/*
// @ts-ignore */}
<MissingRequiredProp />

Хорошая статья. Рекомендую почитать статью всем, кому интересно узнать больше про внутренности TypeScript.

#internals #typescript

http://blog.joshuakgoldberg.com/ts-expect-error/

Вчера вышла новая версия TypeScript. Дениэл Розенвассер рассказал про все новинки релиза — "Announcing TypeScript 4.0".

Были добавлены вариативные типы кортежей (Variadic Tuple Types). Благодаря им возможно типизировать операции высокого порядка над кортежами и массивами, когда неизвестны типы значений.

Появилась поддержка меток для элементов кортежей (Labeled Tuple Elements): type Range = [start: number, end: number];. Использование меток упрощает поддержку кода, так как они делают намерение разработчика более очевидным.

В новой версии TypeScript появилась поддержка вывода типов для членов классов на основе анализа кода конструктора, когда включён noImplicitAny.

Добавлена поддержка составных операторов присваивания для логических операций: a ||= b, a &&= b и a ??= b (Short-Circuiting Assignment Operators). Благодаря этим операторам можно компактно комбинировать присваивание с коротким циклом вычислений логических операций.

В try/catch блоке теперь можно указать тип unknown для catch. Это делает код безопаснее, потому что разработчик в таком случае должен явно сделать необходимые проверки перед использованием catch-значения.

Теперь возможно указать свою JSX-фабрику для Fragment с помощью опции jsxFragmentFactory. Также можно использовать прагму /** @jsxFrag */ для указания фабрики в пределах одного файла.

Есть ломающие изменения. Операнды для delete должны быть опциональными. Переопределние акцессоров свойствами и наоборот теперь будет приводить к ошибке. Был изменён lib.d.ts. Наиболее заметное изменение — удаление document.origin.

Много изменений и улучшений в экосистеме TypeScript. Улучшена работа автоимпортов для только что установленных пакетов. Ускорена работа инкрементальной сборки. Редакторы могут использовать JSDoc /** @deprecated */ для отметки устаревших API при автодополнении кода. Сайт проекта был полностью переписан.

#typescript #release

https://devblogs.microsoft.com/typescript/announcing-typescript-4-0

Иван Греков написал статью об опыте миграции на TypeScript фронтенд-проектов команды Badoo — "Как перенести на TypeScript большую кодовую базу React UI-компонентов".

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

Использованные инструменты и утилиты. Для предварительной оценки кодовой базы и мониторинга прогресса использовали cloc. С помощью утилиты madge был построен граф зависимостей проектов, чтобы определить порядок миграции модулей. Использовали кодмоды для перевода JS-компонентов на TS.

В итоге за три месяца работы было мигрировано 630 React-компонентов.

Рекомендую почитать статью, если планируете мигрировать большой проект на TS (или любую другую технологию).

#migartion #typescript

https://habr.com/ru/company/badoo/blog/518246/

Сергей Руденко из Airbnb написал статью про миграцию кодовой базы фррнтенда компании с JavaScript на TypeScript — "ts-migrate: A Tool for Migrating to TypeScript at Scale".

Для миграции они разработали инструмент ts-migrate, который помогает в массовой конвертации JavaScript файлов. Для автоматического поиска проблемных мест в коде и запуска необходимых трансформаций используются диагностики TypeScript language server. Трансформации представляют собой кодмоды, которые могут использовать jscodeshift, AST TypeScript или могут работать с исходным кодом как с обычным текстом. Есть трансформации для упрощения миграции на TypeScript React-компонентов, но без поддержки хуков.

Благодаря ts-migrate в Airbnb на TypeScript было переведено более 80% всей кодовой базы фронтенда (6 миллионов строк кода). Но так как утилита устанавливает any в проблемных местах, у ребят осталось ещё много работы над добавлением полноценных типов.

Рекомендую почитать статью, если планируете перевести код своего проекта на TypeScript.

#typescript #migration #tool

https://medium.com/airbnb-engineering/ts-migrate-a-tool-for-migrating-to-typescript-at-scale-cd23bfeb5cc

Инженеры Quip написали две статьи про опыт миграции большого проекта на TypeScript — "The Road to TypeScript at Quip".

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

Исходная кодовая база Quip была покрыта типами Google Closure Compiler. Для конвертирования этих типов можно было воспользоваться утилитой Gents от Google, но он не подходил, так как в проекте использовался специфичный синтаксис, поэтому нужно было написать свой конвертер.

Процесс перехода был удачен. За три месяца были исправлены все основные ошибки типизации. Сейчас ребята включили --strict режим компиляции, и ошибки снова появились, но ничего критично они не выявили.

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

#typescript #migration

https://quip.com/blog/the-road-to-typescript-at-quip-part-one
https://quip.com/blog/the-road-to-typescript-at-quip-part-two

Роб Палмер из Bloomberg рассказал об опыте использования TypeScript с огромной кодовой базой — "10 Insights from Adopting TypeScript at Scale".

В статье рассказывается о наиболее интересных вызовах, которые решала команда, занимающаяся разработкой инфраструктуры. Вот некоторые из них: динамическая генерация и использование универсального tsconfig для разных проектов, работа с зависимостями, дедупликация типов, гарантирование энкапсуляции приватных интерфейсов, решение проблем с инлайном типов в сгенерированных декларациях.

TypeScript в Bloomberg используется как "JavaScript с типами", то есть без использования фич, которые не были стандартизированы TC39 (декораторы, enum, namespace и т.п.) Такой подход значительно облегчает дебаг сгенерированного JavaScript-кода и оставляет возможность для работы с JS-движками (задел на будущее), которые смогут отбрасывать типы и запускать TypeScript-код без предварительной компиляции.

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

#typescript #migration

https://www.techatbloomberg.com/blog/10-insights-adopting-typescript-at-scale/

Неделя релизов продолжается. Вчера вышел TypeScript 4.1. Дениэл Розенвассер рассказал о всех изменениях в новой версии.

В TypeScript 4.1 были добавлены литеральные шаблонные типы (Template Literal Types). Благодаря им можно описывать типы, состоящие из нескольких строковых литеральных типов. Также они позволяют на уровне типов "извлекать" строковые литералы из других литералов. В рамках этой фичи были добавлены новые утилитарные типы для манипуляции строками — Uppercase, Lowercase, Capitalize , Uncapitalize.

С новой версии можно ремапить ключи в отображаемых типах (mapped types). Это можно использовать для фильтрации свойств объектных типов или создания новых объектных типов с ключами, использующими литеральные шаблонные типы.

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

Добавлен флаг --noUncheckedIndexedAccess для более строгой проверки доступа к элементам массивов или свойствам объектов. Параметр paths теперь можно использовать без указания baseUrl. Теперь необязательно включать allowJs при использовании опции checkJs. Добавлена поддержка фабрик jsx и jsxs из React 17 (используются транспиляторами).

Есть несколько ломающих изменений. Условные спрэды создают опциональные свойства. Нужно обязательно указывать параметр функции resolve у промисов. Абстрактные члены больше не могут объявляться с async. Если в условном выражении falsy-позиция возвращает тип any`/`unknown, то any`/`unknown будет распространено на всё выражение.

#release #typescript

https://devblogs.microsoft.com/typescript/announcing-typescript-4-1

Стэфан Баумгартнер написал статью о том, почему не стоит использовать некоторые ООП-фичи TypeScript — "Tidy TypeScript: Avoid traditional OOP patterns".

Не нужно использовать статические классы. Они пришли в TypeScript из языков, где классы — основной механизм для структурирования кода. В мире JavaScript есть другие возможности, например, обычные модули.

Пространства имён (namespaces) были добавлены в TypeScript в первых версиях языка для удобства работы с кодом. Сейчас их могут прекрасно заменить модули. Неймспейсы иногда могут быть полезны во внешних файлах декларации, но их не следует использовать в коде проекта.

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

Хорошая статья, но последний пункт про абстрактные классы мне кажется спорным.

#typescript

https://fettblog.eu/tidy-typescript-avoid-traditional-oop/

Стэфан Баумгартнер показал на примере как затипизировать сложную функцию для отправки запросов — "Dynamic Static Typing In TypeScript".

В статье разбирается типизация Express-like функции для отправки GET-запросов. Сначала она типизируется "в лоб". Потом пример немного усложняется: добавляются юнионы, дженерики. В конце статьи разбирается довольно интересный кейс с использованием литеральных шаблонных типов и рекурсивных условных типов (появились в TypeScript 4.1) для извлечения имён параметров из строки.

Хорошая статья. Рекомендую почитать всем, кто работает с TypeScript.

#typescript

https://www.smashingmagazine.com/2021/01/dynamic-static-typing-typescript/

Два дня назад вышел TypeScript 4.2. Дениэл Розенвассер рассказал о всех фичах новой версии.

TypeScript теперь отслеживает использование объединений как альясов типов. Благодаря этому такие альясы отображаются в сообщениях об ошибках, в генерируемых d.ts-файлах и т.д.

В новой версии TypeScript возможно использовать rest-элементы в любой позиции кортежа, но остаётся одно ограничение — они не могут идти после других rest-элементов и до опциональных элементов. Также при деструктуризации кортежей неиспользуемые элементы можно пометить символом подчёркивания _ ( let [_first, second] = getValues(); ), чтобы не возникала ошибка с включённой опцией noUnusedLocals.

Появилась новая опция noPropertyAccessFromIndexSignature. Она отключает возможность использования точки для доступа к тем свойствам объекта, которые определяются с помощью сигнатуры строчного индекса (string index signature).

С сигнатурами конструкторов теперь можно использовать модификатор abstract. Эта фича даёт возможность типизации некоторых ООП-техник.

Если внутри логических выражений с && и || будет находиться функция без её вызова, это будет приводить к ошибке компиляции под флагом --strictNullChecks.

Появилась поддержка флага --explainFiles. С его помощью можно понять, почему файл был включён в процесс компиляции.

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

#release #typescript

https://devblogs.microsoft.com/typescript/announcing-typescript-4-2/

Недавно вышло новое официальное руководство по TypeScript, над которым шла работа с 2018 года. Орта Терокс рассказал обо всех основных изменениях — "Announcing the New TypeScript Handbook".

Новая версия руководства была полностью переработана. Теперь это не набор статей, а полноценная книга, которую можно рекомендовать всем, кто только начинает изучать TypeScript. В руководстве нет разделов, связанных с JavaScript, поэтому для совсем начинающих оно не подходит. Чтобы не перегружать читателей информацией, все редкие кейсы использования TypeScript были перемещены в справочник. Руководство доступно онлайн на основном сайте, а также его можно скачать в форматах pdf/ePub для чтения в оффлайне.

#typescript #book

https://devblogs.microsoft.com/typescript/announcing-the-new-typescript-handbook/

Тим Ван Дер Лип из команды разработки Chrome написал статью о миграции DevTools на TypeScript — "DevTools architecture refresh: migrating DevTools to TypeScript".

Кодовой базе Chrome DevTools уже более 10 лет. За это время она выросла до 150 тысяч строк кода и пережила несколько больших изменений. Например, в 2013 году в ней стал использоваться Closure Compiler в качестве тайпчекера. Но в 2019 году было решено отказаться от Closure в пользу TypeScript, так как Closure не обеспечивал должный уровень типобезопасности.

Автоматизировать миграцию не получилось, поэтому весь процесс занял 13 месяцев. Для распараллеливания работы между инженерами во все файлы был добавлен @ts-nocheck; процесс тайпскрификации заключался в постепенном удалении этих директив.

Разработчики остались довольны результатом. Единственная проблема, с которой пока не удалось справиться, — увеличившееся время сборки.

#typescript #migration

https://developer.chrome.com/blog/migrating-to-typescript/

Недавно на сайте документации Microsoft был опубликован курс, посвящённый разработке на TypeScript, — "Build JavaScript applications using TypeScript".

Курс бесплатный, нужно только зарегистрироваться для сохранения прогресса обучения. Обучение разбито на модули: введение, работа с переменными, функциями, интерфейсами, классами, использование дженериков, работа с внешними библиотеками, организация кода с помощью неймспейсов. Есть перевод на русский язык (очень похоже, что это машинный перевод).

В общем, выглядит интересно. Каких-то хардкорных вещей нет, так что подойдёт всем, кто только начинает знакомиться с TypeScript. Требуется только базовое знание JS и HTML.

#typescript

https://docs.microsoft.com/en-us/learn/paths/build-javascript-applications-typescript/

Крис Хагер написал руководство по настройке TypeScript-проекта — "Starting a TypeScript Project in 2021".

Руководство рассказывает про настройку сборки (используя esbuild), линтинга (eslint), тестов (jest), адаптацию Node.js для бесшовной работы с TypeScript (ts-node). Немного затрагивается тема настройки CI (GitHub Actions/GitLab CI) и генерации документации (TypeDoc).

В руководстве предлагается использовать esbuild, и это очень хороший совет. Однако стоит учитывать, что на данный момент поддержка код-сплиттинга в esbuild находится в экспериментальном статусе, поэтому для больших проектов (по крайней мере пока) лучше брать Webpack или Rollup.

#typescript

https://www.metachris.com/2021/04/starting-a-typescript-project-in-2021/

Дэн Вандеркам рассказал о ситуациях, в которых система типов TypeScript проявляет свою ненадёжность (unsoudness) — "The Seven Sources of Unsoundness in TypeScript".

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

Самые главные источники ненадёжности — это использование any, type assertions, получение значений из объектов и массивов, неправильные определения типов библиотек, вариантность при работе с массивами, отсутствие инвалидации уточнения типов после вызова функции и рекурсивные типы.

Очень хорошая статья. Рекомендую почитать всем, кто использует TypeScript.

#typescript

https://effectivetypescript.com/2021/05/06/unsoundness/