TypeScript *

За последние несколько лет управление состоянием в React претерпело значительные изменения. Многие перешли с Flux на Redux и ищут еще более простые решения. Кроме того, появление React Hooks открыло новые возможности для управления состоянием.

Некоторые из новых библиотек управления состоянием, которые появились на горизонте, — это Recoil, Jotai, Radio Active state и Zustand.

В этой статье я расскажу о Zustand, который предоставляет легкий и простой способ управления состоянием в React.

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

Привет! В данном посте вы найдете перевод статьи hiro9108. В которой пойдет речь о том, почему Вам, стоит начать использовать typescript. Как писать на нём код. Какие типы данных используются в ts. Примеры кода, а также различие, при написании кода в strict моде, и без него.

Привет, друзья!

Представляю вашему вниманию перевод этой замечательной статьи, в которой автор рассказывает о том, как разработать компилятор для WebAssembly на TypeScript.

Обратите внимание: мой вариант компилятора можно найти в этом репозитории, а поиграть с его кодом можно в этой песочнице.

Если вам это интересно, прошу под кат.

Всем привет! Меня зовут Всеволод Золотов, я Senior Frontend в компании Bimeister.

CSS-in-JS очень быстро набрал популярность в React-комьюнити, но насколько актуален этот подход в Angular? В данной статье сравним удобство разработки и производительность двух визуально идентичных приложений (time-tracker), написанных с использованием SASS и @emotion/css.

Привет всем любителям покопаться в технологиях фронтенда! В этой статье я расскажу про то, как можно встроить JSX в проект на TypeScript со сборщиком Vite. Материал будет интересен, если вы:

⚛️ Работали с React, но не знаете, что у него под капотом

?️‍♂️ Интересуетесь всей теорией, связанной с фронтендом

? Гик, создающий проекты на ванильном JS/TS

Зачем? По большей части ради веселья! Вряд ли описанная идея может быть использована в реальных проектах без дополнительных переусложнений и создания нового фронтенд-фреймворка. Так что откройте в соседней вкладке GitHub-репозиторий с кодом проекта и устройтесь поудобнее. Впереди – глубокое погружение в JSX.

Йо, Хабр! Меня зовут Алексей Акулов. Я разрабатываю клиентскую часть продукта BIMeister.

Почти каждый сталкивался с типами Partial или Record. Там таких еще много, но суть в том, что они входят в ту самую группу Utility Types. Такие штуки представляют из себя разные преобразования одних типов в другие. Partial помечает все поля опциональными. Record отдает тип с бесконечным числом полей одного типа. Тут, вроде, понятно, но как писать собственные? Что такое infer? Как он может нам помочь?

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

Сегодня я хочу вам представить относительно новую библиотеку для управления глобальным состоянием приложения – Recoil JS. Как и React является open-source проектом при поддержке разработчиков из Meta. Пока что является экспериментальной, на момент написании статьи имеет версию 0.4.1.

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

Фреймворк Angular используется при создании SPA и предлагает большое количество инструментов как для создания, непосредственно, элементов интерфейса, так и CLI для создания и управления структурой файлов, относящихся к приложению.

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

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

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

В последнее время TS стал де-факто стандартом во фронтенд-разработке. Его достаточно просто начать использовать, и он приносит неоценимую пользу в любых web-приложениях. Но используя его, мы часто даже не задумываемся, насколько на самом деле это мощный инструмент. В большинстве ситуаций нам хватает базовых возможностей TS-а. Но иногда нам случается определить узкий и нестандартный тип. В этом случае можно либо ослабить типы с помощью any или unknown, либо попробовать решить непростую порой головоломку. В этой статье мы решим несколько интересных головоломок с типами.

Стилизация. Довольно насущный для меня момент. Несмотря на годы работы с React, стартуя новый проект, я каждый раз задумываюсь о стилизации. Я перепробовал многие её способы, больше и дольше всего я работал с css-modules и styled-components. Сегодня я хочу предложить вам рассмотреть еще один не менее интересный вариант.

Можете взглянуть на планы команды разработчиков TypeScript-а. Первым пунктом участники ставят введение номинативных типов в TypeScript. Судя по списку это чуть ли не следующий шаг в их работе. Однако сейчас - в марте 2022 TypeScript поддерживает только структурную типизацию. Позвольте, а как же брендирование?

Наследство JavaScript

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

Одна из особенностей JavaScript, которая перекочевала в TypeScript - возможность обращаться к значению с помощью индекс-оператора (квадратные скобки) по индексу, отсутствующему в массиве. Даже по индексу, значение которого меньше нуля, и это может быть нежелательным поведением.

В этой статье показан наш опыт интеграции интернета вещей (IoT) и метавселенной Decentraland. В ней вы найдете список необходимых навыков и мини-инструкцию, чтобы попробовать самим. В конце мы добавили видео-презентацию, что в итоге получилось. 

Преимущества данного метода:

Независимость: возможность не зацикливаться на бизнес логике.
Можно задекларировать, описать схему работы нашего приложения до создания внешних сервисов, использовать замоканные данные в реализации адаптеров.

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

Легкая изменчивость: изменения в одной области нашего приложения не влияют на другие области.

Привет, друзья!

В этой серии из 2 статей я хочу поделиться с вами своими заметками о Prisma.

Prisma — это современное (продвинутое) объектно-реляционное отображение (Object-Relational Mapping, ORM) для Node.js и TypeScript. Проще говоря, Prisma — это инструмент, позволяющий работать с реляционными (PostgreSQL, MySQL, SQL Server, SQLite) и нереляционной (MongoDB) базами данных с помощью JavaScript или TypeScript без использования SQL (хотя такая возможность имеется).

Содержание этой части

• Настройки
  
  • select
  • include
  • where
  • orderBy
  • distinct
• Вложенные запросы
• Фильтры и операторы
  
  • Фильтры
  • Операторы
• Фильтры для связанных записей
• Методы клиента
• Транзакции
  
  • $transaction
  • Интерактивные транзакции

Первая часть.

Если вам это интересно, прошу под кат.

Привет, друзья!

В этой серии из 2 статей я хочу поделиться с вами своими заметками о Prisma.

Prisma — это современное (продвинутое) объектно-реляционное отображение (Object-Relational Mapping, ORM) для Node.js и TypeScript. Проще говоря, Prisma — это инструмент, позволяющий работать с реляционными (PostgreSQL, MySQL, SQL Server, SQLite) и нереляционной (MongoDB) базами данных с помощью JavaScript или TypeScript без использования SQL (хотя такая возможность имеется).

Содержание этой части

• Инициализация проекта
• CLI
• Схема
  
  • Типы данных
  • Атрибуты
  • Функции атрибутов
  • Отношения
• Клиент
  
  • Запросы
  • findUnique
  • findFirst
  • findMany
  • create
  • update
  • upsert
  • delete
  • createMany
  • updateMany
  • deleteMany
  • count
  • aggregate
  • groupBy

Вторая часть.

Если вам это интересно, прошу под кат.

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

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

В жизни каждого разработчика на TypeScript наступает момент, когда ему хочется рвать с все связи с типом any. А ведь по началу, он казался таким милым! Сделай переменной аннотацию типа any и используй любое свойство и метод этой переменной так, как привык работать в JavaScript. Никаких тебе ошибок, все чинно и спокойно, по-старому.

Документация TypeScript оправдывает использование any только на время переноса кодовой базы из JavaScript в TypeScript, но считает постыдным его использование в полноценном проекте. Казалось бы, все хорошо, только в описании типов библиотечных функций самого TypeScript аннотации any встречаются. Очень полезный JSON.parse, один из таких методов. Мы можем каждый раз писать as unknown, а можем доопределить библиотечный интерфейс.