Стилизация. Довольно насущный для меня момент. Несмотря на годы работы с React, стартуя новый проект, я каждый раз задумываюсь о стилизации. Я перепробовал многие её способы, больше и дольше всего я работал с css-modules
и styled-components
. Сегодня я хочу предложить вам рассмотреть еще один не менее интересный вариант.
![](http://webcf.waybackmachine.org/web/20220312151723im_/https://habrastorage.org/getpro/habr/hub/cab/7bb/7b8/cab7bb7b8a279ee584926ced8e87cb15.png)
TypeScript *
Cтрого типизированная надстройка для JavaScript
Новости
TypeScript. Все еще без номинативной типизации
![](https://webcf.waybackmachine.org/web/20220312151723im_/https://habrastorage.org/getpro/habr/upload_files/2c3/15c/578/2c315c578fff6c99ed3ea8ee6b103399.png)
Можете взглянуть на планы команды разработчиков TypeScript-а. Первым пунктом участники ставят введение номинативных типов в TypeScript. Судя по списку это чуть ли не следующий шаг в их работе. Однако сейчас - в марте 2022 TypeScript поддерживает только структурную типизацию. Позвольте, а как же брендирование?
Наследство JavaScript
Система типов TypeScript построена не в вакууме, а с оглядкой на особенности JavaScript. Кстати, это на мой взгляд, это инженерное решение, одно из множества возможных. Компилятор мог бы полностью перекрыть хаос, такой привычный для JavaScript-разработчика.
Одна из особенностей JavaScript, которая перекочевала в TypeScript - возможность обращаться к значению с помощью индекс-оператора (квадратные скобки) по индексу, отсутствующему в массиве. Даже по индексу, значение которого меньше нуля, и это может быть нежелательным поведением.
Кейс интеграции IoT & Metaverse. Удаленное управление гирляндой реальной елки и стриминг видео
![](https://webcf.waybackmachine.org/web/20220312151723im_/https://habrastorage.org/getpro/habr/upload_files/627/5a8/d37/6275a8d37b148328a371799039c9108e.jpeg)
В этой статье показан наш опыт интеграции интернета вещей (IoT) и метавселенной Decentraland. В ней вы найдете список необходимых навыков и мини-инструкцию, чтобы попробовать самим. В конце мы добавили видео-презентацию, что в итоге получилось.
Гексагональная архитектура и Domain Driven Design на примере Front-end приложения
![](https://webcf.waybackmachine.org/web/20220312151723im_/https://habrastorage.org/getpro/habr/upload_files/6bf/bb3/2c7/6bfbb32c77467ee99ab473e7c24e0245.jpg)
Преимущества данного метода:
Независимость: возможность не зацикливаться на бизнес логике.
Можно задекларировать, описать схему работы нашего приложения до создания внешних сервисов, использовать замоканные данные в реализации адаптеров.
Гибкость: использование любых фреймворков, перенос доменов адаптеров в другие проекты, добавление новых адаптеров без изменения исходного кода.
Легкая изменчивость: изменения в одной области нашего приложения не влияют на другие области.
Prisma ORM: полное руководство для начинающих (и не только). Часть 2
![](https://webcf.waybackmachine.org/web/20220312151723im_/https://habrastorage.org/webt/ax/ev/zk/axevzkfcmhrfdfb4j8j9hg12xj0.png)
Привет, друзья!
В этой серии из 2 статей я хочу поделиться с вами своими заметками о Prisma
.
Prisma
— это современное (продвинутое) объектно-реляционное отображение (Object-Relational Mapping, ORM) для Node.js
и TypeScript
. Проще говоря, Prisma
— это инструмент, позволяющий работать с реляционными (PostgreSQL
, MySQL
, SQL Server
, SQLite
) и нереляционной (MongoDB
) базами данных с помощью JavaScript
или TypeScript
без использования SQL
(хотя такая возможность имеется).
Содержание этой части
- Настройки
- Вложенные запросы
- Фильтры и операторы
- Фильтры для связанных записей
- Методы клиента
- Транзакции
Если вам это интересно, прошу под кат.
Prisma ORM: полное руководство для начинающих (и не только). Часть 1
![](https://webcf.waybackmachine.org/web/20220312151723im_/https://habrastorage.org/webt/ax/ev/zk/axevzkfcmhrfdfb4j8j9hg12xj0.png)
Привет, друзья!
В этой серии из 2 статей я хочу поделиться с вами своими заметками о Prisma
.
Prisma
— это современное (продвинутое) объектно-реляционное отображение (Object-Relational Mapping, ORM) для Node.js
и TypeScript
. Проще говоря, Prisma
— это инструмент, позволяющий работать с реляционными (PostgreSQL
, MySQL
, SQL Server
, SQLite
) и нереляционной (MongoDB
) базами данных с помощью JavaScript
или TypeScript
без использования SQL
(хотя такая возможность имеется).
Содержание этой части
Если вам это интересно, прошу под кат.
TypeScript: не выходите за рамки
![](https://webcf.waybackmachine.org/web/20220312151723im_/https://habrastorage.org/getpro/habr/upload_files/92b/bf8/388/92bbf8388d07ffa2770472c9850706b2.jpg)
Вычислив объект, нужный для работы программы, вы сталкиваетесь с характерным рисунком своих желаний: значение хочется отложить в сторонку, чтобы в следующий раз не вычислять его снова, а воспользоваться прошлыми успехами.
Использование прошлых успехов, в переводе на исходный код, обычно сопровождается доступом к хранилищу по индексу. А вы знаете особенности идекс-оператора TypeScript?
TypeScript тип any против всех
![](https://webcf.waybackmachine.org/web/20220312151723im_/https://habrastorage.org/getpro/habr/upload_files/b6b/31a/cce/b6b31accee45b371c1b328e55166443a.jpg)
В жизни каждого разработчика на TypeScript наступает момент, когда ему хочется рвать с все связи с типом any. А ведь по началу, он казался таким милым! Сделай переменной аннотацию типа any и используй любое свойство и метод этой переменной так, как привык работать в JavaScript. Никаких тебе ошибок, все чинно и спокойно, по-старому.
Документация TypeScript оправдывает использование any только на время переноса кодовой базы из JavaScript в TypeScript, но считает постыдным его использование в полноценном проекте. Казалось бы, все хорошо, только в описании типов библиотечных функций самого TypeScript аннотации any встречаются. Очень полезный JSON.parse
, один из таких методов. Мы можем каждый раз писать as unknown
, а можем доопределить библиотечный интерфейс.
Рекомендации по работе с TypeScript
![](https://webcf.waybackmachine.org/web/20220312151723im_/https://habrastorage.org/getpro/habr/upload_files/aa5/247/2a2/aa52472a20c2c94f3a036e7b2ac340a3.png)
С каждым годом TypeScript становится все популярнее и думаю уже почти каждый фронтенд разработчик использовал его в своих проектах.
В данной статье я бы хотел дать некоторые советы по использованию возможностей TypeScript, которые помогут вам сократить количество ошибок в процессе разработки.
Пишем собственные полезные React-хуки на TypeScript и тестируем их с React Testing Library (часть 1)
![](https://webcf.waybackmachine.org/web/20220312151723im_/https://habrastorage.org/getpro/habr/upload_files/c03/be4/6eb/c03be46eb2e742519ea4e32bb55dbcd8.png)
Разбираемся на практике с тестированием собственных React-хуков с использованием TypeScript и React Testing Library, добиваясь 100% покрытия тестами.
Как сделать объекты из массивов в PHP с подсказками?
![](https://webcf.waybackmachine.org/web/20220312151723im_/https://habrastorage.org/getpro/habr/upload_files/61a/a40/a0f/61aa40a0f62e934b3554e0a87a910fa7.png)
Когда надоело запоминать ключи массивов и хочется пользоваться подсказками любимого редактора кода на помощь приходит PHPDoc и немного смекалки.
Недавно я очень близко познакомился с TypeScript и познал всю прелесть строгой типизации. Как же это приятно, когда редактор кода подсказывает тебе какие поля есть в объекте и что ты с ними можешь сделать!
В чем проблема?
Я работаю с CMS Битрикс и приходится иметь дело с массивами разной формы и содержания, запоминать все ключи или искать их в документации. Это занимает драгоценное время.
Собеседование по Javascript, мой опыт. Часть вторая
“И есть еще белые, белые дни, белые горы и белый лед.
Но все, что мне нужно - это несколько слов и место для шага вперед.”
(Виктор Цой)
Это вторая часть статьи, где будут вопросы, которые мне задавали и ответы на них. Я не берусь оценивать полезность вопросов и их смысл. Просто пишу все как есть, надо признать, что часть из них меня здорово обескуражили и мне пришлось уходить не солоно хлебавши, вспоминая один забавный анекдот:
"- Ну как на собеседование сходил? Успешно? - Да. Ручку у них спер" (ссылка)
Часть вопросов будет по typescript, часть по javascript, что-то будет из html, Node.js, настройки, библиотеки, концепции. В общем всё то, о чем говорят на собеседованиях.
Создаём единую инфраструктуру для параллельной разработки мобильных игр
![](https://webcf.waybackmachine.org/web/20220312151723im_/https://habrastorage.org/getpro/habr/upload_files/665/23b/b15/66523bb159fa7cc658d803788b89acac.png)
Она помогла нам переиспользовать игровые механики в непохожих проектах и увеличила скорость разработки на 25%.
Проверка типов во Vue при создании html. Меняем шаблоны на jsx
![](https://webcf.waybackmachine.org/web/20220312151723im_/https://habrastorage.org/getpro/habr/upload_files/c1e/808/c6e/c1e808c6e369bcdcef3ee863a7a90739.png)
Думаю, что сейчас необходимость статической типизации фронтенд приложений не вызывает сомнений, не буду описывать все ее плюсы и минусы, так как на Хабр уже неоднократно обсуждалась данная тема. В данной статье бы хотел предложить решение, которое позволит выполнять проверку типов при создании HTML разметки во Vue.
Прокачайте свое взаимодействие с MobX. Часть 2
Всем привет! Меня зовут Дима, и я не люблю Redux. Я люблю MobX. И в своем сборнике статей я показываю, как можно использовать MobX так, чтобы он стал ещё удобнее.
В своей прошлой статье я описал структурный подход к использованию MobX. применяя паттерны MVVM и DI. В этой статье я собираюсь показать примеры использования такой архитектуры, описывая все возможные преимущества.
Без особо долгого вступления, с места в карьер, я предлагаю начать разбор примеров из прошлой статьи в том порядке, в котором они там выдавались. В самом первом примере описывается взаимодействие сущностей View, ChildView и ViewModel.
Пишем nest.js с нуля на typescript
Прокачайте свое взаимодействие с MobX
В этой статье я опишу структурированный подход к использованию MobX, который может помочь упростить процесс разработки. Здесь не будет описываться код, только описание подхода к использованию. На код будут даваться ссылки. И я очень прошу вас посмотреть на примеры, которые я прикладываю. В них можно будет наглядно увидеть все плюсы описываемой архитектуры.
О самой технологии MobX уже знает немало человек. Судя по данным npmjs.com, этот пакет в среднем скачивается около 850 тысяч раз в неделю. Его главным соперником можно считать библиотеку Redux, и судя по тем же данным, её в среднем скачивают в 8 раз чаще. Такую популярность Redux на фоне гораздо более удобного MobX мне сложно принять, так как я являюсь ярым сторонником этой библиотеки. Поэтому в этой статье я бы хотел описать, почему MobX настолько хорош и как можно сделать его ещё удобнее.
Использование Typescript для создания react компонента «Простой фабрики»
![](https://webcf.waybackmachine.org/web/20220312151723im_/https://habrastorage.org/getpro/habr/upload_files/f58/21e/50e/f5821e50e57f666e1801ad8ea90b4408.png)
Использование Typescript при создании React компонента «Простой фабрики»
Создадим типизированный компонент-фабрику правильно. Так, чтобы он принимал только нужные параметры и ругался на некорректные. Данный подход применим и в других ситуацией, но сегодня рассмотрим компонент, который отрисует фигуру, которую мы захотим.
Язык программирования типов, скрытый в TypeScript. Utility Types
![](https://webcf.waybackmachine.org/web/20220312151723im_/https://habrastorage.org/getpro/habr/upload_files/448/bd8/949/448bd8949140891e078ecc6761284d0f.png)
TypeScript — это язык, расширяющий JavaScript, добавляя в последний типизацию. Правда, так как TypeScript не имеет runtime-а (почти), он транслируется в JavaScript, в процессе чего, вся типизация теряется. Такую типизацию можно назвать лишь инструментом статического анализа кода. Тем не менее — это очень мощный инструмент. К тому же, помимо проверки кода, типизация также и документирует его.
В данной статье я расскажу лишь про типы, объявленные через ключевое слово type
, не касаясь интерфейсов и классов. Однако, эта тема шире, чем может показаться, и я надеюсь, что читатель узнает что-то новое для себя. Ведь с помощью type
можно писать маленькие программки (далее, утилиты), которые выполняются в процессе статического анализа кода, расширяя его возможности.
Создание гибких TypeScript интерфейсов
![](https://webcf.waybackmachine.org/web/20220312151723im_/https://habrastorage.org/getpro/habr/upload_files/26d/453/f3b/26d453f3bfdb5a0a60a5e434e43bdb84.jpg)
Создание и использование интерфейсов в TypeScript. Примеры создания и использования гибких и расширяемых интерфейсов.
Вклад авторов
-
Waterplea 453.0 -
fillpackart 452.8 -
jarvis394 375.0 -
MarsiBarsi 295.0 -
ru_vds 260.8 -
nin-jin 222.0 -
it_monk 154.0 -
pnovikov 143.0 -
MooooM 139.0 -
YBogomolov 123.0