TypeScript— это бесплатный язык программирования с открытым исходным кодом, разработанный Microsoft. Это расширенный набор JavaScript, который, по сути, добавляет к языку необязательную статическую типизацию и объектно-ориентированное программирование на основе классов.
TypeScript предоставляет новейшие и развивающиеся функции JavaScript, в том числе из ECMAScript 2015 и будущих предложений, таких как асинхронные функции и декораторы, для помощи в создании надежных компонентов.
- Начало работы с ТС:1.2W Words | Удивительное вводное руководство по TypeScript(1190+ 👍)
- Расширенный ТС:Одна статья для понимания дженериков и приложений TypeScript (7,8 тыс. слов)(535+ 👍)
На следующей диаграмме показана связь между TypeScript и ES5, ES2015 и ES2016:
Хорошо, краткое введение в TypeScript, давайте сразу перейдем к теме и начнем введение».10 предметов TS, которые я собирал годами"Первый проект в -AVA.
AVA
🤖 Фреймворк для автоматизированной визуальной аналитики.
https://github.com/antvis/AVA
AVA(Визуальная аналитика) — это техническая основа для упрощения визуального анализа. первый по своему названиюAИмеет несколько значений: в нем говорится, что это техническая структура от Alibaba Group, цель которой — статьавтоматизация(автоматизированный),Интеллектуальный привод(управляемый ИИ),Поддержка расширенной аналитики(Расширенное) решение для визуальной аналитики.
rough
Create graphics with a hand-drawn, sketchy, appearance.
https://github.com/pshihn/rough
Rough.jsпредставляет собой облегченную графическую библиотеку (со сжатием менее 9 КБ), позволяющую рисовать эскизы вручную. Библиотека предоставляет базовые возможности для рисования линий, кривых, дуг, многоугольников, окружностей и эллипсов, а также поддерживает рисование путей SVG. Rough.js поддерживает как Canvas, так и SVG.
Помимо создания простой графики, с помощью Rough.js также можно создавать сложную графику, такую как карты в рисованном стиле:
moveable
Moveable! Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable! Groupable! Snappable!
https://github.com/daybrush/moveable
MoveableПозволяет превратить указанные элементы в перетаскиваемые, изменяемые по размеру, убирающиеся, вращаемые или составные элементы.
| Draggable | Resizable | Scalable | Rotatable |
|---|---|---|---|
| Warpable | Pinchable | Groupable | Snappable |
n8n
Free and open fair-code licensed node based Workflow Automation Tool. Easily automate tasks across different services.
https://github.com/n8n-io/n8n
n8n — это бесплатная, открытая,fair-codeЛицензированный инструмент автоматизации рабочих процессов на основе узлов. Он размещается самостоятельно и легко расширяется, поэтому его также можно использовать с внутренними инструментами. Подобно IFTTT и Zapier, n8n может соединять более 100 онлайн-сервисов, включая GitHub, Dropbox, Google, NextCLoud, RSS и Slack. С помощью n8n вы можете легко реализовать автоматические рабочие процессы, такие как запуск службы B при возникновении условия A.
IFTTT — это инновационная концепция интернет-услуг, известная как «артефакт автоматизации сети», которая практична и проста по своей концепции. Полное название IFTTT:If this then that, что означает, что если выполняется условие «это», запускается действие «то».
rrweb-io
record and replay the web.
https://github.com/rrweb-io/rrweb
rrwebда'record and replay the web'Сокращение для записи и воспроизведения действий пользователя в любом веб-интерфейсе с использованием мощного API, предоставляемого современными браузерами.
rrweb в основном состоит из 3 частей:
- rrweb-snapshot, в том числе моментальный снимок и две функции перестроения. Снапшот используется для преобразования DOM и его состояния в сериализуемую структуру данных и добавления уникального идентификатора; перестроение — это перестроение структуры данных, записанной снэпшотом, в соответствующую DOM.
- rrweb, Содержат две функции RECORD и Replay. Record используется для записи всех изменений в DOM, Replay переставляется в соответствии с соответствующим временем записи.
- rrweb-player, предоставляет набор элементов управления пользовательского интерфейса для rrweb, предоставляя функции на основе графического интерфейса, такие как пауза, ускоренная перемотка вперед, перетаскивание в любой момент времени для воспроизведения.
Как показано на рисунке выше, после того, как вы закончите запись действий пользователя в веб-интерфейсе, вы можетеrrweb-playerФункции воспроизведения, такие как пауза, быстрая перемотка вперед, перетаскивание в любой момент времени. После прочтения некоторые друзья чешутся, автор rrweb также очень внимателен, чтобы предоставить нам три онлайн-примера:
- Bootstrap checkout form(https://wuwuwu.RR Web.IO/demo/checkout-form)
- Conversational Form(https://woowoohoo.RR Web.IO/demo/plug)
- Tetris game(https://woowoowoo.RR Web.IO/demo/birthday в тот же день?blue=en)
Тетрис, или Тетрис, для всех игровых приставок и компьютерных операционных систем, представляет собой видеоигру-головоломку, изначально разработанную и запрограммированную Алексеем Пажитновым в Советском Союзе.
Игра тетрис вызывает у меня бесконечные воспоминания детства, волна памяти убивающая, есть ли такие?
hyper
A terminal built on web technologies.
https://github.com/vercel/hyper
HyperЭто инструмент командной строки, разработанный с использованием веб-технологий.Как и VS Code, он основан на Electron и предоставляет практичные плагины и темы.
Разработчики могут по своему усмотрению на официальном сайте Hyper -hyper.is/themesВыберите свою любимую тему, и, конечно же, вы можете поделиться собственной разработанной темой с другими пользователями:
amis
Внешний интерфейс с низким кодом может генерировать различные внутренние страницы с помощью конфигурации JSON.
https://github.com/baidu/amis
amisИнтерфейсная платформа с низким кодом Baidu с открытым исходным кодом может генерировать различные внутренние страницы с помощью конфигурации JSON, что значительно снижает затраты на разработку и даже не требует понимания внешнего интерфейса. В настоящее время он широко используется во фронтенд-разработке внутренних платформ Baidu.100+Используемый отдел, созданный3w+страница.
Схема архитектуры рендерера Amis
editor.js
A block-styled editor with clean JSON output.
https://github.com/codex-team/editor.js
Editor.jsредактор блочного стиля. Блоки — это структурные единицы, из которых состоит запись. Например, абзацы, заголовки, изображения, видео, списки — все это блоки. Каждый блок представлен плагином. Кроме того, Editor.js предоставляет разработчикам множество готовых плагинов и простой API для создания новых плагинов.
react-hook-form
📋 React-хуки для проверки форм без хлопот (Web + React Native)
https://github.com/react-hook-form/react-hook-form
React Hook FormЭто высокопроизводительная, гибкая, легко расширяемая и простая в использовании библиотека проверки форм. Он поддерживает следующие функции:
- Проще создавать формы и интеграции
- Неконтролируемая проверка формы
- Создан с учетом производительности и опыта разработки
- Мини размер без других зависимостей
- Проверка в соответствии со стандартами html
- Совместимость с React Native
- служба поддержкиYup, Joi, Superstructили обычай
- Поддержка встроенной проверки браузера
nest
Прогрессивная платформа Node.js для создания эффективных, масштабируемых серверных приложений корпоративного уровня на основе TypeScript и JavaScript (ES6, ES7, ES8) 🚀.
https://github.com/nestjs/nest
Nestявляется эффективным и масштабируемымNode.jsФреймворк для веб-приложений. Он использует современный JavaScript илиTypeScript(сохраняет совместимость с чистым JavaScript) и сочетает в себе элементы ООП (объектно-ориентированное программирование), FP (функциональное программирование) и FRP (функционально-реактивное программирование).
Под капотом Nest используетExpress, но также обеспечивает совместимость с различными другими библиотеками, такими какFastify, вы можете легко использовать различные сторонние плагины.
В последние годы, благодаря Node.js, JavaScript стал «универсальным языком» для интерфейсных и серверных веб-приложений, что привело кAngular,React,Vueи другие обновляющие проекты, повышающие производительность разработчиков и позволяющие быстро создавать тестируемые и масштабируемые клиентские приложения. Однако на стороне сервера, хотя и существует множество отличных библиотек, хелперов и инструментов Node, ни один из них эффективно не решает главную проблему — архитектуру.
Nest стремится предоставить готовую архитектуру приложений, которая позволяет легко создавать легко тестируемые, расширяемые, слабосвязанные и простые в обслуживании приложения.
После прочтения 10 проектов, представленных выше, вас заинтересовали некоторые из них? Если вам интересно, сначала изучите TypeScript. Кроме того, добро пожаловать, друзья, оставьте мне сообщение, чтобы порекомендовать другие забавные и интересные проекты TypeScript.
В этой статье используетсяmdniceнабор текста