🦊 Angular Fox 🚀 — русскогорящие новости сообщества
3.99K subscribers
1.21K photos
7 videos
1.07K links
Как костыль на реактивно-лисьей тяге 🔥🦊

Нравится канал? Подпишись на меня!
👉 twitter.com/thekiba_ru
💖 twitter.com/thekiba_io
medium.com/@thekiba
github.com/thekiba

Чаты @angular_ru @angular_jobs
Download Telegram
Сравнение utility types библиотек или TypeScript на стероидах

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

В статье рассказывается о сторонних utility types библиотеках, которые могут сэкономить время на типизацию.

👉 https://habr.com/ru/articles/794410/
👍51
Attribute Injection

В Angular 17.3.0-next.1 появился новый класс HostAttributeToken, позволяющий внедрять атрибуты аналогично @Attribute.

Его можно использовать следующим образом:
import {HostAttributeToken, inject} from '@angular/core';

class MyDir {
someAttr = inject(new HostAttributeToken('some-attr'));
}


Новый API ведет себя аналогично декоратору @Attribute, с одним существенным отличием: он выбрасывает DI-ошибку, если атрибут не существует, а не возвращает null.

👉 https://netbasal.com/streamlining-attribute-injection-in-angular-the-hostattributetoken-approach-494f5c1428b8
👍16👎1🤯1
Типизированные реактивные формы

Всегда лучше получить предупреждение заранее, если ваша форма не валидна.

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

👉 https://angularindepth.com/posts/1527/strongly-typed-reactive-forms-in-angular
👍10🔥32
Оптимизируем изображения

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

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

👉 https://angularindepth.com/posts/1522/the-who-what-where-when-why-and-how-of-image-optimization-in-angular
👍9
Тип never и обработка ошибок в TypeScript

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

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

👉 https://fettblog.eu/typescript-never-and-error-handling/
👍7
Почему сигналы не заменят RxJS

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

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

👉 https://angular.love/en/why-angular-signals-wont-replace-rxjs/
👍13👀5🔥21🏆1
Анонс TypeScript 5.4

В новом релизе: улучшили сужение типов, добавили утилитарный тип NoInfer, Object.groupBy и Map.groupBy, так же множество других изменений.

В ближайшие месяцы команда TS будет работать над версией 5.5. Вы можете ознакомиться с их планом на GitHub.

👉 https://devblogs.microsoft.com/typescript/announcing-typescript-5-4/
👍9🔥4
Директива-контекст

Если вы все еще игнорируете кастомные директивы в Angular.

Алан Маркевич показал, как с помощью них можно расширить функционал ваших компонентов, улучшив DX.

👉 https://habr.com/ru/articles/799063/
👍14🤔3🥱21
Необычный RxJS

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

В статье приведены примеры использования редких операторов.

👉 https://habr.com/ru/articles/799171/
👍14🔥6👎1
Оператор satisfies в TypeScript

В версии TypeScript 4.9 появился оператор satisfies, который за последние месяцы набирает все большую популярность.

В статье попытка ответить на вопрос, когда его применять.

👉 https://dev.to/this-is-learning/a-deep-dive-into-the-satisfies-operator-in-typescript-1b3n
👍6
Angular и микрофронтенды

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

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

👉 https://angular.love/en/angular-micro-frontends-a-modern-approach-to-complex-app-development/
👍92
Ленивые бесконечные списки на основе Deferrable Views

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

Павел Сапачёв рассказал о различных подходах в реализации списков.

👉 https://habr.com/ru/companies/tinkoff/articles/800201/
👍8🔥1
Что нового в Angular 17.3

На днях вышла версия 17.3, которая принесла множество изменений.

В этой статье перечислены наиболее важные из них.

👉 https://dev.to/this-is-angular/whats-new-in-angular-173-1148
👍10🔥4
Создание консоли освещения

Консоль освещения используется для управления несколькими сценическими светильниками одновременно.

Это история о том, как она разрабатывалась с помощью Angular и NativeScript.

👉 https://blog.angular.io/angular-with-nativescript-creating-the-blackout-lighting-console-1cf6a030b896
👍7🔥5
Изучаем NoInfer

В TypeScript 5.4 появился новый утилитарный тип под названием NoInfer.

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

👉 https://www.totaltypescript.com/noinfer
👍8
🚀 Анонс AnalogJS 1.0

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

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

👉 https://dev.to/analogjs/announcing-analogjs-10-19an
🤮11👍10🤔1🥴1
Типизация Array.reduce

Есть одна распространенная проблема, которая возникает в TS всякий раз, когда вы пытаетесь использовать reduce для преобразования массива в объект.

Давайте попробуем ее решить.

👉 https://www.totaltypescript.com/how-to-type-array-reduce
👍14💩7
Кастомные декораторы

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

Алексей Овсянников поделился опытом написания собственных декораторов.

👉 https://habr.com/ru/articles/802545/
👍14🔥41
Инъекция зависимостей в Angular

Dependency Injection (DI) — один из самых важных механизмов в Angular. Он позволяет инвертировать управление, передавая экземпляры запрашиваемых зависимостей в класс, а не создавая их внутри класса. Такой подход создает слабую связанность и упрощает тестирование.

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

👉 https://angular.love/en/dependency-injection-in-angular-everything-you-need-to-know/
👍11🔥2
Решаем ошибку при миграции на Storybook 7

При переходе с шестой версии Storybook на седьмую встретилась ошибка «Providers from the BrowserModule have already been loaded. If you need access to common directives such as NgIf and NgFor, import the CommonModule instead».

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

👉 https://habr.com/ru/companies/skyeng/articles/798697/
👍2
Введение в дженерики для новичков

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

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

👉 https://dev.to/this-is-learning/a-gentle-introduction-to-generics-in-typescript-3ap3
👍5