Как стать автором
Обновить
63.33

TypeScript *

Cтрого типизированная надстройка для JavaScript

Сначала показывать
Порог рейтинга
Уровень сложности

Комбинируя генераторы

Уровень сложностиСредний
Время на прочтение7 мин
Количество просмотров31

Итак, я написал еще один генератор предикатов типов для TypeScript. Круто, и что дальше?

Так как мой Генератор предикатов это про безопасность типов, корректности и в целом доверие, почему бы не пойти дальше и не сгенерировать еще и тестовый набор для функции предиката прямо рядом с самим кодом?

Читать далее

Новости

Почему ты не должен использовать onChange в React

Уровень сложностиСредний
Время на прочтение4 мин
Количество просмотров593

Недавно, работая с компонентом ввода номера телефона в форме регистрации, я столкнулся с весьма неочевидной особенностью работы различных обработчиков событий. Связано это непосредственно с onChange, onPaste и onInput. Мне пришлось провести достаточно глубокий ресерч, чтобы разобраться в особенностях, которые я встретил. Начнем по порядку.

Читать далее

Новое руководство по стилю Angular

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров1K

Текущее руководство по стилю было создано ещё в 2016 году, когда только появился переработанный Angular v2.0. Как пишет Джереми Эльбурн (разработчик Angular с 2012 года и технический руководитель проекта), многое изменилось, пора изменить и принятый стиль разработки, поэтому предложен RFC:

Читать далее

Как на примере одной кнопки можно улучшить Frontend часть проекта

Уровень сложностиСредний
Время на прочтение6 мин
Количество просмотров2.4K

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

Давай начнем по порядку. Проект написан на NextJs, TS, TailwindCSS. И есть на сайте анимационная кнопка, которые при скролле красиво появляется и при клике открывает модалку.

Читать далее

Истории

Локализуем React (NextJS, TypeScript) сайт на несколько языков с помощью i18next

Уровень сложностиСредний
Время на прочтение6 мин
Количество просмотров2.3K

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

Как я это делал — расскажу в статье.

Читать далее

Lite-версия мигратора Flyway для PostgreSQL на TypeScript

Уровень сложностиСредний
Время на прочтение4 мин
Количество просмотров402

Так как я активно использую возможности Flyway, такие как repeatable migrations и callbacks, и не хочу от них отказываться, а аналогов этих функций в других системах миграции нет, я решил написать собственный лёгкий клон Flyway на Node.js для PostgreSQL.

Читать далее

React Context

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров2.9K

Всем привет! Меня зовут Андрей, я Frontend разработчик. На данный момент работаю на фрилансе. Имею достаточно хороший опыт работы с React.

Хочу рассказать, что такое React Context и как это можно использовать в проектах.
Попробую всё рассказать как можно проще.

Читать далее

Рецепты Typescript: выбор одного и только одного обязательного поля в объекте

Уровень сложностиСредний
Время на прочтение4 мин
Количество просмотров3.5K

Привет, Хабр! Это Костя из CLoud.ru, и я продолжаю цикл коротких статей с рецептами TypeScript, посвященный решению повседневных задач. Сегодня у нас в меню тип, который поможет вам выбрать только одно поле из типа. Поехали!

Смотреть рецепт

DDD против реальности: распространённые ловушки и их решение в NestJS

Уровень сложностиПростой
Время на прочтение11 мин
Количество просмотров4.4K

Сложно внедрить DDD в NestJS, не запутавшись в абстракциях? В статье рассмотрены частые ошибки - от комбайна в контроллерах до формальных Value Objects. Разбираем, как выделять слои (Domain, Application, Infrastructure, Interface), правильно использовать Entities и репозитории и создавать поддерживаемую архитектуру.

Читать далее

Performance и оптимизация TypeScript-типов в больших проектах

Уровень сложностиСредний
Время на прочтение8 мин
Количество просмотров7.1K

Узнайте, почему большие TypeScript-проекты начинают "захлёбываться" от рекурсивных типов и обилия импортов, и как с помощью правильной структуры монорепы, настройки tsconfig и диагностики ускорить время компиляции и работу IDE. Рассматриваем инструменты, параллельную сборку, оптимизацию рекурсивных типов и прочие техники, которые помогут сохранить ваш проект быстрым и удобным.

Читать далее

TanStack Router: современный и типобезопасный роутер для React

Уровень сложностиСредний
Время на прочтение11 мин
Количество просмотров1.8K

Если вы пишете на React и любите TypeScript, вам стоит обратить внимание на TanStack Router - современный, гибкий и полностью типобезопасный роутер. В статье разбираю его ключевые возможности (loaders, кэширование, работу с query-параметрами, SSR) и сравниваем с другими популярными решениями.

Читать далее

Type-level программирование в TypeScript: практические кейсы и обзор возможностей

Уровень сложностиСредний
Время на прочтение9 мин
Количество просмотров2.3K

Как использовать мощь системы типов TypeScript для вычисления логики ещё на этапе компиляции и автоматической генерации кода. Разбираем условные типы, шаблонные литералы, рекурсивные типы и другие приёмы, чтобы упростить разработку, сократить дублирование кода и снизить вероятность ошибок на runtime.

Читать далее

Эффективный процесс разработки на основе Feature-Sliced Design: наш опыт

Уровень сложностиПростой
Время на прочтение10 мин
Количество просмотров3.1K

Привет! Я – Егор, фронтенд-разработчик в Чиббис. Наша команда разработала новый личный кабинет для партнеров – b2b-приложение с нуля, используя Feature-Sliced Design. В статье я делюсь нашим опытом: от выбора стека технологий до построения процесса разработки, который помог нам за 5,5 месяцев превратить пустую папку в рабочий продукт. Мы разберем итерации, FSD-макеты, этапы создания разделов и расскажем, как удалось сократить время разработки и тестирования.

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

Читать далее

Ближайшие события

25 – 26 апреля
IT-конференция Merge Tatarstan 2025
Казань

Type VS Interface: разница есть, но не всегда

Уровень сложностиСредний
Время на прочтение8 мин
Количество просмотров6.5K

Когда речь заходит о TypeScript, один из самых частых вопросов, которые мне задают студенты, звучит так: «Что лучше использовать: интерфейсы или типы?»

На эту тему написано уже множество статей, в том числе на Хабре (например тут и тут), и обсуждений в сообществе более чем достаточно. Однако даже после всех этих разъяснений часто остаётся ощущение, что однозначного ответа нет. Одни авторы говорят: «Интерфейсы лучше для декларативности», другие уверяют: «Типы универсальнее», и каждый подкрепляет свою точку зрения примерами.

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

И как результат, я не только нашёл интересные аспекты использования интерфейсов и типов, но и захотел поделиться ими с вами. Эта статья — попытка дать максимально объективный взгляд на выбор между интерфейсами и типами, рассматривая их с точки зрения практики, возможностей и ограничений TypeScript.

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

В поисках наиболее точного и понятного объяснения различий между интерфейсами и типами я пересмотрел множество источников. Среди них особенно выделилась статья «Type vs Interface» от Mykyta M.. В ней автор обстоятельно разбирает преимущества и недостатки обоих подходов, а также приводит примеры их использования.

Читать далее

Что такое реактивное программирование? Руководство для начинающих по написанию реактивного кода

Уровень сложностиПростой
Время на прочтение7 мин
Количество просмотров21K

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

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

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

Реактивное программирование работает аналогично. Оно имеет дело с потоками данных (например, графиком прибытия автобусов) и распространением изменений (прибытием нового автобуса), позволяя приложениям реагировать в режиме реального времени (так же, как пассажиры реагируют, садясь в автобус). Звучит знакомо?

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

Читать далее

Создание REST API с NestJS и TypeORM

Уровень сложностиПростой
Время на прочтение10 мин
Количество просмотров1.4K

NestJS — это прогрессивный фреймворк для построения эффективных и масштабируемых серверных приложений на Node.js. Он использует современные возможности JavaScript и TypeScript, вдохновлен архитектурными паттернами Angular и поддерживает модульность, инъекцию зависимостей и другие современные подходы.

TypeORM — это ORM (Object-Relational Mapping) инструмент, который позволяет взаимодействовать с базами данных, используя объекты и классы, что упрощает разработку и поддерживает различные СУБД, такие как PostgreSQL, MySQL, SQLite и другие.

Сочетание NestJS и TypeORM предоставляет мощный инструментарий для разработки REST API, обеспечивая высокую производительность, модульность и удобство поддержки кода.

Читать далее

Конвертация даты по временной зоне пользователя в «NestJS», а также ввод и отображение даты в «Angular»

Время на прочтение14 мин
Количество просмотров705

В этой статье я расскажу о добавлении нового поля workUntilDate с типом timestamp(6) в таблицу Webhook базы данных Webhook.

На стороне фронтенда (в Angular-приложении) для этого поля будет реализован удобный календарь с возможностью выбора времени.

Пользователи смогут задавать дату и время в своей временной зоне, тогда как бэкенд (NestJS-приложение) будет сохранять введённые данные в базе данных в формате UTC+0.

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

Читать далее

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

Время на прочтение12 мин
Количество просмотров7.8K

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

Читать

Интеграция CSS-фреймворков в Angular: советы, которые вы не знали

Уровень сложностиСредний
Время на прочтение52 мин
Количество просмотров1.8K

Вы создали новое Angular‑приложение, подключили популярный CSS‑фреймворк, но вместо ожидаемого вау‑эффекта столкнулись с проблемами: стили выглядят не так, как хотелось, валидация форм работает странно, а некоторые элементы вообще не реагируют на изменения состояния. Знакомо? Это типичная ситуация, когда CSS‑фреймворки интегрируются без учета особенностей Angular.

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

Читать далее

Краткая история WWW от фронтенд-разработчика

Время на прочтение7 мин
Количество просмотров1.8K

Всемирная паутина (WWW) — это не просто набор веб‑страниц, это революция, изменившая наше восприятие информации и общения. С момента своего появления в начале 1990-х годов WWW кардинально трансформировала мир, открыв новые горизонты для бизнеса, образования и повседневной жизни. История веб пестрит взлетами, падениями и уходами в крайности, но здесь мы пройдемся только по самым ярким моментам! Следить за эволюцией технологии, которая навсегда изменила наше общество, мы будем глазами фронтенд‑разработчика.

Читать далее
1
23 ...