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

TypeScript *

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

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

Практическая реализация паттерна Server-Driven UI на Flutter c использованием фреймворка Duit

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

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

В рамках этой статьи мы попытаемся решить эти проблемы, взяв за основу один из популярных паттернов и создав демонстрационное Flutter приложение на базе Server-Driven UI фреймворка Duit.

Читать далее
Всего голосов 5: ↑4 и ↓1 +3
Комментарии 5

Новости

Когда «as never» — единственное, что работает

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

as never, очень редко требуется в TypeScript. Давайте рассмотрим пример, где это необходимо.

Представим, что мы хотим отформатировать некоторый ввод на основе его typeof. Сначала мы создадим объект formatters, который сопоставит typeof с функцией форматирования:

Читать далее
Всего голосов 8: ↑4 и ↓4 0
Комментарии 17

End-to-end тестирование React приложения с помощью Playwright

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

Привет, я Лиза – веб разработчик в одной зарубежной компании. Хочу поделиться тем, как я автоматизировала регрессионное тестирование в рабочем проекте на React с использованием довольно нового фреймворка Playwright. Разберемся, почему именно этот фреймворк, какие подводные камни, как обойти авторизацию и кто этим пользуется. 

Читать далее
Всего голосов 9: ↑9 и ↓0 +9
Комментарии 8

Переход с Vue-CLI и Webpack на Vite: ускоряем разработку Vue 3

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

Одним из новых инструментов в арсенале Vue 3 является Vite - быстрый и легковесный бандлер, который значительно упрощает процесс разработки и ускоряет сборку проекта. В этой статье мы рассмотрим, как перейти от стандартного подхода с использованием Vue-CLI и Webpack к более продвинутому и эффективному методу работы с помощью Vite.

Читать далее
Всего голосов 10: ↑10 и ↓0 +10
Комментарии 11

Истории

Использование возможностей Angular. Часть 1

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

Добрый день. Меня зовут Юрик и я angular-разработчик. Остальные в комнате у психиатра:

- Здравствуй Юрик, мы рады тебя видеть.

Читать далее
Всего голосов 8: ↑7 и ↓1 +6
Комментарии 12

Готовим Telegram Mini App без туннеля и с Hot Module Reload на React, TypeScript

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

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

Читать далее
Всего голосов 13: ↑13 и ↓0 +13
Комментарии 9

Zod умер. Да здравствует ajv-ts

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

TLRD: zod не подходил в проекте и решили сделать свой builder с помощью ajv в zod-like API. Поскольку гугление не показало никаких вменяемых результатов - было решено сделать свои костыли решения.

Если стало интересно - прошу под кат!

стало интересно, посмотрим что там!
Всего голосов 9: ↑7 и ↓2 +5
Комментарии 12

Коллекция утилит NestJS-mod для унификации приложений и модулей на NestJS

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

Коллекция утилит NestJS-mod предназначена для унификации приложений и модулей NestJS, а также представляет новые логические возможности разделения обязанностей между модулями (System, Core, Feature, Integration, Infrastructure).

Читать далее
Всего голосов 1: ↑1 и ↓0 +1
Комментарии 2

Cache API — кэшируем данные на стороне клиента

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

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

Разберемся, как мы можем его использовать, сравним с другими методами организации кэша на стороне клиента, а также реализуем новостную ленту с применением Cache API.

Читать далее
Всего голосов 5: ↑5 и ↓0 +5
Комментарии 13

ECMAScript 6+ vs TypeScript

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

Минули те времена, когда разработчики писали Frontend на «чистом» JavaScript (вплоть до ECMAScript 5). Все изменилось с выходом в свет версии ECMAScript 6 в 2015-м году. Это событие стало, по истине значимым в мировой Frontend разработке. Предыдущие 6 лет до этого, язык практически не менялся. Годом ранее, в 2014-м, компания Microsoft опубликовала TypeScript 1.0 и предоставила встроенную поддержку языка в своей IDE VisualStudio 2013. На самом деле, официально, TypeScript был выпущен еще в 2012 (версия 0.8), однако, популярностью он не пользовался в виду практически полного отсутствия поддержки со стороны существующих, на тот момент, IDE.

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

Типизацию TypeScript рассматривать в этой статье не будем, т.к. очевидно, что в ECMAScript её нет, и сравнивать тут нечего.

Для чистоты эксперимента код будем транспилировать в старый добрый ECMAScript 5. TypeScript, для удобства, возьмем версии 4.8.4 (этой версии, для целей статьи достаточно) и будем компилировать его родным tsc компилятором. Для ECMAScript воспользуемся инструментарием Babel.

Читать далее
Всего голосов 9: ↑2 и ↓7 -5
Комментарии 15

Как мы используем Puppeteer для создания Open Graph изображений с Node.js

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

В наше время многочисленные сайты создают страницы, которыми пользователи хотели бы делиться в разных социальных сетях или мессенджерах. Благодаря тегам Open Graph ссылки могут иметь красочное превью изображение, которое привлекает еще больше внимания. В этой статья я хотел бы рассказать как с помощью Puppeteer и node.js мы упростили поддержку и сократили время разработки при создании таких изображений.

Узнать больше
Всего голосов 3: ↑3 и ↓0 +3
Комментарии 0

Как я использую GigaChat для Frontend разработки

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

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

GigaChat - это мультимодальная модель (аналог ChatGPT от OpenAI), которую разрабатывает Сбер. В отличие от языковых моделей, мультимодальные работают не только с текстом. Они могут генерировать иллюстрации.

Читать далее
Всего голосов 11: ↑6 и ↓5 +1
Комментарии 17

Создание плагина для Фигмы: дизайнеры захотели — разработчик подсуетился

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

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

В статье рассказываю, как написать плагин, и что это проще, чем звучит на первый взгляд. +1 идея для тех, кому не хватает идей для пет-проектов.

Читать далее
Всего голосов 12: ↑12 и ↓0 +12
Комментарии 0

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

One Day Offer от УЦСБ
Дата 17 февраля
Время 10:00
Место
Онлайн

Стилистические правила умерли, да здравствуют стилистические правила

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

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

Читать далее
Всего голосов 18: ↑17 и ↓1 +16
Комментарии 0

Вопросы и ответы для собеседования на позицию frontend-разработчик. Часть 2

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

Всем привет! В этой статье (части) рассмотрим вопросы, связанные с великим и могучим TypeScript'ом, которые задают на собеседованиях. Если вы не читали прошлую статью, где описаны вопросы по JS, вот ссылочка. Пожалуйста, не заучивайте вопросы, это вредно для вашего здоровья!)

Читать далее
Всего голосов 13: ↑11 и ↓2 +9
Комментарии 14

Типизация: Как TypeScript помог мне найти Тайного Санту

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

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

Читать далее
Всего голосов 10: ↑9 и ↓1 +8
Комментарии 4

Как я решал Advent of Typescript, и что я понял

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

Возможно вы слышали про Advent of Code — ежегодное соревнование по решению задач на рождественскую тему. Начиная с 1 декабря, вплоть католического рождества, каждый день выкладывается новая задача. С каждым днем сложность задач возрастает.

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

Мне было интересно попробовать свои силы в написании сложных типов, потому что на работе зачастую я пишу достаточно простые типы. Я даже не задумывался, что можно написать тип, который будет принимать судоку в формате многомерного массива, и возвращать true или false в зависимости от того, валиден он или нет🤯

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

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

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

Читать далее
Всего голосов 8: ↑8 и ↓0 +8
Комментарии 4

As const в Typescript

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

Привет, Хабр!

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

Читать далее
Всего голосов 14: ↑14 и ↓0 +14
Комментарии 16

Как я пытался писать функциональные компоненты без хуков на react

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

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

Читать далее
Всего голосов 14: ↑9 и ↓5 +4
Комментарии 37

Решаем задачу: как сохранить нервные клетки пользователей с помощью валидации поля ввода

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

Всем привет! Меня зовут Алексей Гмитрон, я фулстек-разработчик и наставник на курсе «Фронтенд-разработчик» в Практикуме. Довольно долгое время я разрабатываю интерфейсы, а ещё дольше — пользуюсь ими. 

В этом году я много путешествовал, поэтому нередко заполнял формы с анкетами на разные визы — в них бывало по 30—40 полей. Когда что-то шло не так, часто сайты не давали никакой обратной связи. Иногда они сбрасывали всё, что я заполнял в течение часа, если одно из полей невалидно. 

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

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

Читать далее
Всего голосов 12: ↑8 и ↓4 +4
Комментарии 7

Вклад авторов

Работа