as never, очень редко требуется в TypeScript. Давайте рассмотрим пример, где это необходимо.
Представим, что мы хотим отформатировать некоторый ввод на основе его typeof. Сначала мы создадим объект formatters, который сопоставит typeof с функцией форматирования:
Привет, я Лиза – веб разработчик в одной зарубежной компании. Хочу поделиться тем, как я автоматизировала регрессионное тестирование в рабочем проекте на React с использованием довольно нового фреймворка Playwright. Разберемся, почему именно этот фреймворк, какие подводные камни, как обойти авторизацию и кто этим пользуется.
Одним из новых инструментов в арсенале Vue 3 является Vite - быстрый и легковесный бандлер, который значительно упрощает процесс разработки и ускоряет сборку проекта. В этой статье мы рассмотрим, как перейти от стандартного подхода с использованием Vue-CLI и Webpack к более продвинутому и эффективному методу работы с помощью Vite.
Добрый день. Меня зовут Юрик и я angular-разработчик. Остальные в комнате у психиатра:
- Здравствуй Юрик, мы рады тебя видеть.
В этой статье разберем как собрать комфортную девелопмент среду для разработки Telegram Mini App. Под комфортом я понимаю ситуацию когда тебе не нужно выгружать свое приложение в облако, чтобы увидеть результат работы в телеге, или запускать туннель типа ngrock, который после каждого перезапуска меняет ссылку. И я не уверен, что HMR можно получить через туннель. Поэтому я сделал свое решение, и хочу оставить его тут себе и потомкам.
TLRD: zod не подходил в проекте и решили сделать свой builder с помощью ajv в zod-like API. Поскольку гугление не показало никаких вменяемых результатов - было решено сделать свои костыли решения.
Если стало интересно - прошу под кат!
Коллекция утилит NestJS-mod предназначена для унификации приложений и модулей NestJS, а также представляет новые логические возможности разделения обязанностей между модулями (System, Core, Feature, Integration, Infrastructure).
Cache API - сравнительно старый API для управления хранилищем кэша, доступный уже во всех современных браузерах и являющийся частью ServiceWorker.
Разберемся, как мы можем его использовать, сравним с другими методами организации кэша на стороне клиента, а также реализуем новостную ленту с применением Cache API.
Минули те времена, когда разработчики писали 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.
В наше время многочисленные сайты создают страницы, которыми пользователи хотели бы делиться в разных социальных сетях или мессенджерах. Благодаря тегам Open Graph ссылки могут иметь красочное превью изображение, которое привлекает еще больше внимания. В этой статья я хотел бы рассказать как с помощью Puppeteer и node.js мы упростили поддержку и сократили время разработки при создании таких изображений.
Всем привет! В этой статье я хотел бы рассказать про один из моих инструментов - GigaChat, ссылочка, который стал мне помощником на работе. Расскажу как его использую в повседневных рабочих задачах. Также подписывайтесь на мой канал про фронтенд, где делюсь интересной информацией, ссылочка здесь.
GigaChat - это мультимодальная модель (аналог ChatGPT от OpenAI), которую разрабатывает Сбер. В отличие от языковых моделей, мультимодальные работают не только с текстом. Они могут генерировать иллюстрации.
День только начинался, ничего не предвещало беды, как вдруг в чате с дизайнерами появился вопрос: «Есть ли плагин в фигме, который при наведении на страницу показывает все используемые текстовые стили?..» Гугл такой плагин не нашел, поэтому я вызвалась его написать, предварительно поизучав, как вообще это делается.
В статье рассказываю, как написать плагин, и что это проще, чем звучит на первый взгляд. +1 идея для тех, кому не хватает идей для пет-проектов.
Под конец прошлого года, по ряду причин, ESLint отказались от дальнейшей поддержки и развития стилистических правил. А тема, как по мне, несправедливо осталась в тени. Давайте разберемся, почему так произошло и какие изменения нас ждут на поприще статического анализа и форматирования кода.
Всем привет! В этой статье (части) рассмотрим вопросы, связанные с великим и могучим TypeScript'ом, которые задают на собеседованиях. Если вы не читали прошлую статью, где описаны вопросы по JS, вот ссылочка. Пожалуйста, не заучивайте вопросы, это вредно для вашего здоровья!)
Декабрь в офисе не проходит без традиции тайного Санты. Мой вишлист остался пустым, но подарок, который я получила, удивил своей точностью. А вместе с ним пришло загадочное послание. Как новичку в компании, мне было трудно с первого взгляда угадать отправителя, поэтому я решила использовать TypeScript, чтобы найти своего Санту.
Возможно вы слышали про Advent of Code — ежегодное соревнование по решению задач на рождественскую тему. Начиная с 1 декабря, вплоть католического рождества, каждый день выкладывается новая задача. С каждым днем сложность задач возрастает.
В декабре 2023 года впервые проходил Advent of TypeScript — похожее соревнование, но более специфичное, в котором все задачи посвящены написанию типа, согласно условию. В результате решения должен быть написан тип, который что‑то принимает как дженерик параметр, как‑то преобразует этот параметр в другой тип, согласно описанию задания.
Мне было интересно попробовать свои силы в написании сложных типов, потому что на работе зачастую я пишу достаточно простые типы. Я даже не задумывался, что можно написать тип, который будет принимать судоку в формате многомерного массива, и возвращать true или false в зависимости от того, валиден он или нет🤯
В ходе решения задач, я частично открыл / частично вспомнил паттерны и особенности написания типов, с которыми хочу поделиться. Если хотите попробовать свои силы, то задачи все еще доступны. Если вы хотите посмотреть решения задач, то можно посмотреть здесь.
Для написания решения задач, нужно описать логику внутри типа. Для этого не помешали бы инструменты из мира рантайма: циклы, условия, функции. Те инструменты, которые мы используем, когда решаем задачи из LeetCode.
В ходе решения задач, я понял, что на самом деле итерироваться, создавать условия и использовать что‑то подобное функциям можно успешно использовать и при решении задач на типы.
Привет, Хабр!
В разработке часто возникают ситуации, когда точность типов и нежелание допускать неясности в коде становятся первостепенными задачами. В таких случаях, разработчикам приходится искать инструменты, предоставляющие максимальную ясность и строгость в определении данных. Один из таких инструментов — ключевое слово as const. В данной статье мы рассмотрим, как as const может повысить уровень строгости и предсказуемости, а также рассмотрим практические примеры его использования для создания неизменяемых и точных типов.
Хуки позволили нам перейти с классового компонента на функциональный. Они решили проблему хранения состояния между перерисовками функционального компонента и отчасти упростив написание логики. Почему же я предлагаю отказаться от них?
Всем привет! Меня зовут Алексей Гмитрон, я фулстек-разработчик и наставник на курсе «Фронтенд-разработчик» в Практикуме. Довольно долгое время я разрабатываю интерфейсы, а ещё дольше — пользуюсь ими.
В этом году я много путешествовал, поэтому нередко заполнял формы с анкетами на разные визы — в них бывало по 30—40 полей. Когда что-то шло не так, часто сайты не давали никакой обратной связи. Иногда они сбрасывали всё, что я заполнял в течение часа, если одно из полей невалидно.
Решить проблему могла бы валидация. Это критически важная часть разработки веб-приложений, которая соотносит данные с необходимым форматом и указывает на ошибки. Также она гарантирует безопасность дальнейшей обработки этих данных.
В этой статье мы разберёмся, как настроить валидацию поля ввода.
При работе с React и TypeScript вы часто сталкиваетесь с подобными ошибками:
const onChange = (e) => {}; // Parameter 'e' implicitly has an 'any' type.
<input onChange={onChange} />;
Не всегда понятно, какой тип следует присвоить пременнойe внутри функции onChange.
Это может произойти с onClick, onSubmit или любым другим обработчиком событий, которые получают элементы DOM.
К счастью, есть несколько решений:
