✨ Анонс TypeScript 5.6 Beta

Disallowed Nullish and Truthy Checks

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

Iterator Helper Methods

Недавно в ECMAScript было предложено добавить множество методов из Array к итераторам. Поэтому в TS появился новый тип под названием BuiltinIterator.

Вместе с этим появился новый флаг --strictBuiltinIteratorReturn.

Опция --noUncheckedSideEffectImports

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

Опция --noCheck​

Позволяет пропустить проверку типов для всех входных файлов.

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

Allow --build with Intermediate Errors

Режим --build будет продолжать собирать проекты, даже если в зависимостях есть промежуточные ошибки.

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

👉 https://devblogs.microsoft.com/typescript/announcing-typescript-5-6-beta/

✨ Руководство по использованию Signal

Signal — это обертка вокруг значения, которая уведомляет заинтересованных потребителей об его изменении.

Евгений объяснил, что такое Signal, как его применять в Angular и привёл примеры реального использования.

👉 https://habr.com/ru/articles/832632/

✨ Computed сигналы и ChangeDetection

Наверняка вы замечали, что в computed сигналах зависимости не указываются напрямую. Но как же они тогда работают?

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

👉 https://habr.com/ru/articles/832520/

✨ Анонс NgRx Signals v18

Начиная с версии 18, пакет @ngrx/signals вышел из стадии предварительной версии для разработчиков и теперь стабилен.

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

👉 https://dev.to/ngrx/announcing-ngrx-signals-v18-state-encapsulation-private-store-members-enhanced-entity-management-and-more-2lo6

✨ Восстановление позиции прокрутки

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

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

👉 https://angular.love/en/angular-scroll-position-restoration

✨ @let: за и против

Недавнее появление @let в Angular вызвало значительные споры в сообществе разработчиков.

Одни считают его ценным дополнением, другие — ненужным усложнением. Подробнее об этом читайте в статье.

👉 https://angular.love/en/angular-template-let-variable-hot-or-not

✨ Управление состоянием URL с помощью NgRx Router Store

Иногда возникает необходимость сохранять состояние приложения в URL-адресе, чтобы пользователи могли добавлять его в закладки или делиться конкретными состояниями приложения.

NgRx Router Store позволяет легко связать состояние приложения с событиями роутера и получать данные из роутера.

👉 https://danywalls.com/handling-router-url-parameters-using-ngrx-router-store

✨ Представляем Taiga UI v4

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

Никита Барсуков рассказал о ключевых обновлениях библиотеки, но их оказалось настолько много, что едва удалось уместить все в одну статью.

👉 https://habr.com/ru/companies/tbank/articles/834508/

✨ Type-safe фронтенд без проверок на null

Разобраться в множестве различных подходов к реактивности в фронтенд-приложениях бывает непросто.

В своей статье Никита Борисов сделал обзор основ моделирования реактивных приложений, на примере реализации типобезопасной реактивности в Angular приложении.

👉 https://dev.to/niko_doing_dev/frontend-made-fully-type-safe-and-without-null-checks-part-1-11lm

✨ Использование Signal и Model Inputs

Функции Signal и Model Inputs являются отличной альтернативой декораторам Input и Output, решая проблему обнаружения изменений без дополнительного кода.

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

👉 https://habr.com/ru/companies/tbank/articles/835662/

✨ Обработка ошибок с помощью toSignal

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

По умолчанию, когда Observable, связанный с сигналом, генерирует ошибку, toSignal будет распространять эту ошибку каждый раз, когда вы попытаетесь прочитать значение сигнала. Это может вызвать проблемы, если у вашего приложения есть глобальный обработчик ошибок.

👉 https://netbasal.com/handling-errors-with-tosignal-in-angular-6500511c0d6f

✨ Динамический рендеринг компонентов

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

Даня подробно объяснил процесс их создания, предоставив примеры кода и пошаговое руководство.

👉 https://habr.com/ru/companies/tbank/articles/836036/

✨ Особенности Enums в TypeScript

Многим нравится Enums, но их реализация в TypeScript довольно странная, с множеством нюансов.

В статье рассматриваются их недостатки. Узнайте, почему числовые и строковые Enum ведут себя по-разному, как это может привести к неожиданным результатам, и почему строковые более предпочтительны.

👉 https://www.totaltypescript.com/why-i-dont-like-typescript-enums

✨ Использование isolatedModules в Angular 18.2

В Angular появилась поддержка isolatedModules из TypeScript, начиная с версии 18.2. Благодаря этому производительность при сборке может увеличиться до 10%.

В статье рассказывается, как вы можете воспользоваться этой функцией в своих проектах.

👉 https://blog.angular.dev/using-isolatedmodules-in-angular-18-2-68a7d3a6c03d

✨ Другой взгляд на TypeScript

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

В статье анализируются основные возможности TypeScript с точки зрения работы с множествами.

👉 https://www.rob.directory/blog/a-different-way-to-think-about-typescript

✨ Использование GitHub в качестве провайдера аутентификации

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

В статье объясняется, как его настроить для использования GitHub в качестве провайдера аутентификации для вашего Angular-приложения.

👉 https://dev.to/this-is-angular/using-github-as-an-authentication-provider-in-your-angular-app-with-pocketbase-3dcc

✨ Сериализация сущностей с помощью декораторов на TypeScript

Иногда нужно сохранить объект в виде строки, например, для localStorage. Для простых объектов это легко сделать, но в случае сложных структур приходится вручную управлять процессом сериализации. Это увеличивает сложность кода и повышает риск ошибок.

Константин Харламов рассказал о том, как использовать декораторы в TypeScript для этой задачи.

👉 https://habr.com/ru/articles/836746/

✨ Инструменты для тестирования доступности

Доступность (a11y) — это важный аспект разработки, который гарантирует, что веб-приложения могут быть использованы всеми, включая людей с ограниченными возможностями.

Автоматизированные инструменты тестирования, такие как lighthouse, помогают выявить основные проблемы с доступностью, но не могут заменить ручное тестирование, которое охватывает более широкие аспекты.

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

👉 https://www.angulararchitects.io/en/blog/accessibility-testing-tools/

✨ Как создать NPM пакет

Хотите научиться публиковать свои пакеты на npm? Мы нашли пошаговое руководство, которое поможет вам разобраться во всех деталях этого процесса!

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

👉 https://www.totaltypescript.com/how-to-create-an-npm-package

✨ Анонс TypeScript 5.6 RC

Что нового с момента выхода бета-версии?

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

BuiltinIterator был переименован в IteratorObject, и теперь имеет несколько подтипов, таких как ArrayIterator, MapIterator и т.д.

Для режима --build был добавлен новый флаг --stopOnBuildErrors. Это приближает поведение к предыдущим версиям TypeScript, так как начиная с версии TypeScript 5.6 компиляция всегда продолжалась даже при наличии ошибок.

👉 https://devblogs.microsoft.com/typescript/announcing-typescript-5-6-rc/