✨ 10 Utility Types для проектов

Utility Types значительно упрощают процесс разработки, улучшая качество кода и сокращая количество ошибок.

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

👉 https://dev.to/antonzo/10-sustom-utility-types-for-typescript-projects-48pe

✨ Исключения для any

Использование any справедливо считается вредным в большинстве сценариев. Даже существуют правила ESLint, запрещающие его использование.

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

👉 https://www.totaltypescript.com/any-considered-harmful

✨ Signals standard proposal

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

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

👉 https://github.com/proposal-signals/proposal-signals

✨ Успешная работа с сигналами

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

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

👉 https://www.angulararchitects.io/en/blog/successful-with-signals-in-angular-3-effective-rules-for-your-architecture/

✨Angular прикроет вас, когда дело дойдет до XSS

Межсайтовый скриптинг (XSS) — это уязвимость, которая позволяет злоумышленнику внедрить вредоносный код в веб-приложение. На протяжении многих лет она входит в список OWASP Top 10 наиболее критичных рисков безопасности.

Если вы впервые слышите об XSS, то эта статья поможет вам защитить ваши приложения.

👉 https://timdeschryver.dev/blog/angular-has-your-back-when-it-comes-to-xss

✨ Типизируем process.env

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

В статье даны пара советов, для строгого определения типов process.env.

👉 https://www.totaltypescript.com/how-to-strongly-type-process-env

✨ Тестирование сигналов с помощью Angular Testing Library

Наверняка вы задавались вопросом, как сигналы повлияют на ваши тесты. Но если вы используете Angular Testing Library, то вам повезло.

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

👉 https://timdeschryver.dev/blog/testing-signals-with-angular-testing-library

✨ Пробуем Analog SFC

Не так давно вышел Analog 1.0 и представил сообществу Angular стабильный мета-фреймворк, но самым большим вопросом к нему стали Single File Components (SFC).

Этот формат файлов и API является экспериментальным, поэтому команда разработчиков будем рада, если вы попробуете SFC и оставите свои отзывы.

👉 https://dev.to/analogjs/bridging-analog-to-angular-with-esbuild-and-vite-472j

✨ Тестирование анимации в Angular

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

Однако не менее важно обеспечить надежность и корректность этих анимаций.

👉 https://dev.to/this-is-angular/testing-animations-in-angular-a-comprehensive-guide-4nhp

✨ Статический анализ мультиязычности c помощью ngx-translate-lint

Если в вашем приложении есть мультиязычность и вы для нее используете пакет ngx-translate.

То вам пригодится небольшая заметка о инструменте для проверки ключей с помощью regexp.

👉 https://habr.com/ru/companies/lanit/articles/805655/

✨ Паттерны для эффектов

Суть эффектов можно понять за несколько секунд, но в реальном коде они могут оказаться сложнее в использовании, что приводит к неожиданному поведению или ошибкам.

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

👉 https://dev.to/this-is-angular/efficient-angular-effects-patterns-4396

✨ Обобщенные фабрики тайпгардов в TypeScript

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

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

👉 https://habr.com/ru/companies/tinkoff/articles/808655/

✨ Изучаем AbortSignal

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

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

В этой статье рассказывается о двух малоизвестных статических методах AbortSignal.timeout() и AbortSignal.any().

👉 https://netbasal.com/harnessing-control-exploring-javascripts-abortsignal-timeout-and-any-methods-f479992a9615

✨ Event Dispatch в Angular

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

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

Подобный подход можно реализовать с помощью Angular preboot. Но вместо того чтобы воскрешать preboot, команда Angular решила использовать сотрудничество с Wiz, применив библиотеку JSAction.

👉 https://blog.angular.io/event-dispatch-in-angular-89d868d2351c

✨ Unified Control State Change Events

Одной из функций, представленных в Angular 18.0.0-next.3, является добавление нового свойства под названием events для AbstractControl.

Это свойство представляет Observable, который отслеживает различные изменения в форме.

👉 https://netbasal.com/unified-control-state-change-events-in-angular-7e83c0504c8b

✨Оптимизируем размер сборки

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

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

👉 https://angular.love/en/how-to-optimize-your-angular-bundle-size/

✨ Изучаем Angular afterRender и afterNextRender Hooks

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

Angular решает эту проблему, внедряя функции afterRender и afterNextRender.

👉 https://netbasal.com/exploring-angulars-afterrender-and-afternextrender-hooks-7133612a0287

✨ Новая эра для Angular

Как вы знаете, Angular полагается на Zone.js, чтобы узнать, когда что-то изменилось, и это единственный фреймворк, который работает подобным образом.

Совсем скоро в Angular 18 мы получим новый способ обнаружения изменений, без Zone.js.

👉 https://justangular.com/blog/a-new-era-for-angular-zoneless-change-detection

✨ Анонс TypeScript 5.5 Beta

Многие долго этого ждали и наконец свершилось. В новой версии TypeScript теперь выводит предикат типа для метода filter:

function makeBirdCalls(countries: string[]) {
  const birds = countries
    .map(country => nationalBirds.get(country))
    .filter(bird => bird !== undefined);

  for (const bird of birds) {
    bird.sing(); // Раньше здесь была ошибка 'bird' is possibly 'undefined'
  }
}

Так же ввели проверку синтаксиса регулярных выражений и несколько других улучшений.

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

✨ Руководство по RedirectCommand

В будущем Angular 18 появится возможность более тонко управлять поведением навигации.

При использовании RedirectCommand с опцией skipLocationChange, перенаправление происходит без изменения URL браузера.

👉 https://netbasal.com/navigating-angular-apps-a-guide-to-redirectcommand-1675e890349d