Все потоки
Поиск
Написать публикацию
Обновить
30.94

TypeScript *

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

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

Log4ts — библиотека, которой не должно быть

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

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

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

Библиотека Log4ts вдохновлена идеями Log4J и обеспечивает логирование в программах, написанных на  TypeScript.
Далее в этой статье я расскажу о том, как её установить, использовать и конфигурировать.

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

Читать далее

Книга: «Эффективный TypeScript: 83 способа улучшить код. 2-е изд.»

Время на прочтение5 мин
Количество просмотров4.5K
imageПривет, Хаброжители!

В 2020 году у издательского дома «Питер» вышел перевод «Эффективный TypeScript: 62 способа улучшить код», и книга сразу стала бестселлером. Прошло почти полных четыре года! Многое изменилось с тех пор, в том числе и вышла новая версия TypeScript. Дэн Вандеркам полностью переработал книгу, и мы представляем вам новый «Эффективный TypeScript: 83 способа улучшить код. 2-е изд.». Подробный! Понятный! С неизменным скворцом на обложке!

Но обо всём по порядку.
Читать дальше →

Effect для TypeScript разработчиков

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

В статье я рассказываю о библиотеке Effect TS – не о новом реактивном фреймворке, а о реализации системы эффектов на TypeScript.

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

Читать далее

FizzBuzz, который не помог мне найти работу

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

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

Я знал, что это такое, но до прошлой недели меня ни разу не просили написать его.

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

Базовую реализацию fizzbuzz можно написать однострочником на Typescript:

const fizzbuzz = (n: number)=>`${n%3 ? '' : 'Fizz'}${n%5 ? '' : 'Buzz'}`;

Во время собеседования меня попросили написать fizzbuzz на любом близком мне языке; собеседующий даже сказал, что можно использовать эзотерические языки программирования, но рекомендовал не делать этого, потому что некоторые правила реализовать будет сложно. Этого вполне можно было ожидать, ведь собеседование могло длиться до 45 минут, а обсуждать простой fizzbuzz особого смысла не было. Менять язык программирования после начала собеседования тоже было запрещено.
Читать дальше →

Callback рефы в React: что это такое и где можно применять

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

При разработке у нас зачастую возникает необходимость прямого взаимодействия с DOM-элементами. Для такого случая React предоставляет нам механизм рефов (refs), который позволяет получать доступ к элементам после того, как они зарендерятся. Чаще всего используются обычные объектные рефы через useRef (обзовём их так), но также существует другой подход — callback refs. Этот метод даёт нам дополнительную гибкость и контроль над жизненным циклом элементов, позволяя выполнять необходимые нам специфические действия в точные моменты привязки и отвязки элементов. В этой статье я хочу объяснить, что такое callback refs, как они работают, показать проблемы при их использовании и примеры их использования.

Читать далее

Чем отличается мой Type Predicate Generator?

Уровень сложностиСложный
Время на прочтение17 мин
Количество просмотров1.6K

Кратко: это максимально безопасный по типизации инструмент, генерирует статические файлы с кодом для максимальной совместимости, быстрый благодаря предварительной компиляции (AOT) и компактный. Также он предоставляет удобный генератор модульных тестов, чтобы можно было быть почти на 100% уверенным, что создаваемые предикаты работают, как ожидается.

Этот пост предлагает детальное сравнение Generator с другими инструментами для проверки типов во время выполнения, а также дает более широкий обзор смежных тем. Со временем пост постепенно превращается в более аналитическую статью, а не просто «мой X круче, чем ваш Y».

Погрузиться

Гибкость и контроль над данными: применение моков в разработке

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

В современной разработке приложений важным аспектом является способность быстро и эффективно создавать прототипы и демонстрационные версии. В этом посте мы расскажем о нашем опыте использования моков (mocks) для эмуляции бэкенда на примере фронтенд-проекта. Мы поделимся ключевыми проблемами, с которыми столкнулись, и решениями, которые помогли нам ускорить разработку, улучшить стабильность и обеспечить гибкость в работе с данными. Вы узнаете, как мы использовали Mock Service Worker (MSW) и Vite-плагин для создания изолированного и удобного окружения, а также какие преимущества это принесло нашей команде.

Читать далее

FastAPI и Vue.js 3: телеграм-бот с MiniApp для записи и автоматических уведомлений. Пишем фронтенд

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

Друзья, приветствую! Наконец-то дошли руки до описания второй части нашего большого проекта по работе с выдуманной клиникой «Здоровье Плюс».

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

В прошлой части мы полностью закрыли вопрос логики нашего бота. Сегодня мы займемся написанием фронтенда для нашего Telegram MiniApp с использованием современного JS фреймворка Vue.JS 3.

К концу статьи мы реализуем полноценный реактивный фронтенд, который одинаково хорошо будет смотреться, как в формате веб-сайта (мобильная и пк-версия), так и в формате Telegram MiniApp.

Читать далее

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

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

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

Читать далее

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

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

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

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

Читать далее

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

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

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

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

Читать далее

React Context

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

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

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

Читать далее

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

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

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

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

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

Читать далее