🦊 Angular Fox 🚀 — русскогорящие новости сообщества

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

✨ Анонс 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

✨ Computed сигналы и ChangeDetection

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

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

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

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

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

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

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

✨ Анонс 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/

✨ Все, что вы хотели знать про иерархию инжекторов в Angular

Dependency Injection (DI) — это мощный инструмент, который упрощает работу с зависимостями. Однако часто мы не используем его в полной мере, потому что не до конца понимаем его работу.

Дмитрий Дробышев подробно объяснил, как функционирует DI, что собой представляет иерархия инжекторов и какие изменения внесла 14-я версия Angular с появлением standalone компонентов.

👉 https://habr.com/ru/companies/zyfra/articles/817843/

✨ TypeScript в Node.js

На днях в Node.js появилась возможность выполнять файлы TypeScript, установив экспериментальный флаг --experimental-strip-types. Для этого используется SWC, который уже применяется в Deno.

Node.js транспилирует код TypeScript в JavaScript, при этом проверка типов не выполняется, а типы отбрасываются. Это означает, что использование Enum, namespaces и т.д. будет невозможно.

👉 https://github.com/nodejs/node/pull/53725

✨ Выбор JavaScript фреймворка

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

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

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

✨ Улучшаем тесты на Angular Testing Library

В последней версии библиотеки Angular Testing Library (v17.1.0) появилось новое API on, которое позволяет легче тестировать компоненты.

В небольшой заметке рассказывается, как его можно использовать и почему оно является лучшей альтернативой существующим API componentOutputs и componentProperties.

👉 https://timdeschryver.dev/blog/the-new-on-property-improves-output-testing-in-angular-testing-library

✨ Тестирование компонентов

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

Сегодня мы узнаем, как тестировать компоненты и справляться с подобными ситуациями.

👉 https://www.danywalls.com/testing-components-in-angular-noerrorsschema-stub-components-and-ngmocks

✨ Пользовательская проверка равенства в toSignal

Сигналы поддерживали функцию equal, когда Angular 16 только появился.

Теперь эта опция доступна в toSignal, и её можно использовать для повышения производительности.

👉 https://dev.to/railsstudent/explain-tosignal-custom-equality-checking-in-angular-18-g2i

✨ Бесплатная книга по TypeScript

Total TypeScript: Essentials — книга, которая проведет вас по пути от новичка до уверенного пользователя.

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

👉 https://www.totaltypescript.com/books/total-typescript-essentials/kickstart-your-typescript-setup