​Как типизировать Vuex Store

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

В статье автор объясняет, зачем нужна типизация state и почему предпочтительнее использовать Pinia. Он демонстрирует, как задать типы для mutations, actions и getters.

В результате вы получите 100% типобезопасный Vuex, избегая при этом путаницы в сложных объявлениях типов.

#vue #pinia #typescript

​Продвинутый TypeScript

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

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

#typescript #javascript

​​TypeScript: лучшие практики

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

Давайте разберемся используете ли вы этот невероятно мощный инструмент правильно: https://habr.com/ru/articles/775524/

#typescript #javascript

​​​Пишем игру на JS/TS и развиваем навык работы с кодом

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

Сохраните, чтобы не потерять: https://tproger.ru/articles/pet-proekt-pishem-igru-na-js-ts-i-razvivaem-navyk-raboty-s-kodom/

#typescript #javascript #петпроект

​​На днях вышел релиз мажорной версии открытого проекта для работы с электронной почтой React Email 2.0

Это коллекция компонентов для создания электронных писем с использованием React и TypeScript. Исходный код проекта доступен на GitHub под лицензией MIT License.

Основные изменения:
— обновлены компоненты и основные блоки;
— улучшен пользовательский интерфейс и обновлены иконки;
— добавлена возможность предпросмотра на мобильных устройствах;
— появилась поддержка подпапок;
— время запуска локального сервера React Email 2.0 при новой установке составляет около 7 секунд (для React Email 1.10.1 было 40 секунд);
— после завершения первоначальной настройки время загрузки составляет около 1 секунды.

Подробнее: https://react.email/docs/changelog#jan-19-2024

#react #typescript

​​Состоялся релиз Tempo — библиотеки для работы с датами в JavaScript и TypeScript

Разработчики фреймворка FormKit для создания форм на Vue опубликовали код библиотеки Tempo, предназначенной для работы с датой и временем в JavaScript и TypeScript. Команда проекта акцентировала внимание на простоте использования и минимальном размере.

При создании разработчики вдохновлялись moment.js, day.js и date-fns, но начали проект с нуля, чтобы итоговая библиотека отвечала всем требованиям команды. В коде Tempo используются возможности Intl.DateTimeFormat для извлечения сложных типов данных, к которым относятся форматы дат и смещения часовых поясов:

import { format, parse } from "@formkit/tempo"

const readable = format(new Date(), "full")
// понедельник, 19 февр. 2024 г.

parse(readable, "full")
// Date: 2024-02-18T21:00:00.000Z

Библиотека реализована на языке TypeScript. Установить Tempo можно с помощью пакетных менеджеров pnpm, npm, yarn и bun, а у проекта на гитхабе уже больше 1,2 тыс. звёзд: https://github.com/formkit/tempo

#инструменты #javascript #typescript

​​Обзор types-spring — библиотеки-надстройки над TypeScript, улучшающей безопасность и удобство использования встроенных типов

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

Types-spring ставит перед собой цель нивелировать как можно больше таких недоработок. Это своего рода патч над TypeScript, который расширяет встроенные типы, делая их более точными и полезными для разработчика.

В статье рассказали, что за библиотека и как её использовать: https://tproger.ru/articles/obzor-biblioteki-types-spring

@tproger_web #typescript #инструменты

​​​Мощь декораторов TypeScript на живых примерах: декорирование методов класса

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

В этой статье вы можете изучить несколько примеров из реальных проектов, где применение декораторов сильно упростило код и его понимание:

https://habr.com/ru/articles/707496/

@tproger_web #typescript

Гайд: создаём полноценную браузерную игру на TypeScript

Делимся 2-часовым гайдом по созданию 2D-платформера на TypeScript: https://www.youtube.com/watch?v=R6WvJOiX99s

#typescript #gamedev

Old but gold: Сервис для обнаружения типа устройства пользователя на TypeScript и Vue 3

Нашли для вас интересный туториал, в котором рассказывается, как создать сервис способный узнавать:

— тип взаимодействия с веб-приложением;
— ориентацию экрана на данный момент;
— тип устройства: desktop, tab, phone.

#typescript #vue3

Лучший способ создания паттерна проектирования Singleton в JavaScript и TypeScript

Паттерн проектирования Singleton гарантирует, что у класса есть только один экземпляр и предоставляет глобальную точку доступа к этому экземпляру. Этот паттерн полезен, когда необходим именно один объект для координации действий в системе.

В этой статье собраны эффективные методы реализации паттерна Singleton в JavaScript и TypeScript.

#паттерны #javascript #typescript

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

Большие TypeScript-проекты на практике часто представляют собой монорепозитории, в которых может быть сотни и даже тысячи модулей, интерфейсов и типов. На ранних этапах роста всё кажется вполне управляемым, но в определённый момент мы начинаем замечать, что время компиляции становится слишком большим, а IDE начинает работать ощутимо медленнее.

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

#typescript

Пишем свой движок для Flexbox-вёрстки

Предлагаем вам написать свой движок для компоновки элементов с нуля на TypeScript. В результате у вас получится аналог Yoga или Stretch, который вы сможете использовать в своих проектах.

Если заинтересовались, то давайте без лишних слов приступим к делу. Подробности по ссылке:

https://tchayen.com/how-to-write-a-flexbox-layout-engine

#фронтенд #typescript #css

Doom запустили на типах TypeScript

Энтузиасты взяли и запилили полноценный рантайм для WebAssembly, но вся магия — на типах TypeScript. И да, они запустили на этой штуке Doom. Как им это удалось, они рассказали в видео.

Кармак дуреет с этой прикормки!

#typescript #ненормальноепрограммирование

Microsoft ускорила TypeScript в 10 раз

В TypeScript радикальные изменения — Microsoft решила сменить язык компилятора, перейдя на Go. Ещё не все работы закончены, но уже сейчас время компиляции сократилось в среднем в 10 раз!

Пока что TS будет работать на JavaScript. Полный переход состоится на версии 7.0, когда будут решены все вопросы с совместимостью версий. Но первую нативную версию обещают уже в середине 2025 года.

Что думаете? Стоит оно того?

#новости #typescript

Интерактивный гайд по CRDT

Благодаря CRDT можно легко создавать приложения с совместным редактированием, такие как Google Docs, но без необходимости подключаться к серверу.

В этой серии статей мы узнаем, что такое CRDT. Затем напишем простой редактор, объединим его с более сложными структурами данных и, наконец, применим то, что мы выучили, чтобы создать совместный редактор, похожий на Paint в онлайне.

https://jakelazaroff.com/words/an-interactive-intro-to-crdts/

#typescript #crdt

Old But Gold: создаём полноценную браузерную игру на TypeScript

Делимся 2-часовым гайдом по созданию 2D-платформера на TypeScript: https://www.youtube.com/watch?v=R6WvJOiX99s

#typescript #gamedev