讓人眼前一亮的 10 大 TS 項目

時間 2020-06-12

標籤讓人眼前亮的項目简体版

原文原文鏈接

TypeScript 是一種由微軟開發的自由和開源的編程語言。它是 JavaScript 的一個超集，並且本質上向這個語言添加了可選的靜態類型和基於類的面向對象編程。html

TypeScript 提供最新的和不斷髮展的 JavaScript 特性，包括那些來自 2015 年的 ECMAScript 和將來的提案中的特性，好比異步功能和 Decorators，以幫助創建健壯的組件。前端

TS 入門： 1.2W字 | 了不得的 TypeScript 入門教程（550+個👍）
TS 進階：一文讀懂 TypeScript 泛型及應用（ 7.8K字）（285+個👍）

下圖顯示了 TypeScript 與 ES五、ES2015 和 ES2016 之間的關係：vue

好的，簡單介紹了 TypeScript，下面咱們立刻步入正題，來開始介紹」這些年我收藏過的 10 個 TS 項目「中的第一個項目 —— AVA。node

AVA

🤖 A framework for automated visual analytics.react

https://github.com/antvis/AVAgit

AVA（A Visual Analytics）是爲了更簡便的可視分析而生的技術框架。其名稱中的第一個 A 具備多重涵義：它說明了這是一個出自阿里巴巴集團（Alibaba）技術框架，其目標是成爲一個自動化（Automated）、智能驅動（AI driven）、支持加強分析（Augmented）的可視分析解決方案。github

rough

Create graphics with a hand-drawn, sketchy, appearance.web

https://github.com/pshihn/roughtypescript

Rough.js 是一個輕量的圖形庫（壓縮後的 <9 kB），可讓你用手繪的方式繪製草圖。該庫提供繪製線條、曲線、弧線、多邊形、圓形和橢圓的基礎能力，同時支持繪製 SVG 路徑。Rough.js 可同時支持 Canvas 和 SVG。express

除了生成簡單的圖形以外，使用 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 許可，基於節點的工做流自動化工具。它能夠自託管，很容易擴展，所以也能夠與內部工具一塊兒使用。n8n 相似 IFTTT、Zapier，能夠互聯互通包括 GitHub、Dropbox、Google、NextCLoud、RSS、Slack 在內的 100 多個在線服務。利用 n8n 你能夠方便地實現當 A 條件發生，觸發 B 服務這樣的自動工做流程。

IFTTT 是一個被稱爲「網絡自動化神器」的創新型互聯網服務理念，它很實用並且概念很簡單。IFTTT 全稱是 If this then that，意思是若是知足「this」條件，則觸發執行「that」動做。

rrweb-io

record and replay the web.

https://github.com/rrweb-io/rrweb

rrweb 是 'record and replay the web' 的簡寫，旨在利用現代瀏覽器所提供的強大 API 錄製並回聽任意 Web 界面中的用戶操做。

rrweb 主要由 3 部分組成：

rrweb-snapshot，包含 snapshot 和 rebuild 兩個功能。snapshot 用於將 DOM 及其狀態轉化爲可序列化的數據結構並添加惟一標識；rebuild 則是將 snapshot 記錄的數據結構重建爲對應的 DOM。
rrweb，包含 record 和 replay 兩個功能。record 用於記錄 DOM 中的全部變動（mutation）；replay 則是將記錄的變動按照對應的時間一一重放。
rrweb-player，爲 rrweb 提供一套 UI 控件，提供基於 GUI 的暫停、快進、拖拽至任意時間點播放等功能。

如上圖所示，在完成錄製 Web 界面中的用戶操做以後，就能夠 rrweb-player 進行暫停、快進、拖拽至任意時間點等播放功能。看完以後，有些小夥伴是否是手癢了，rrweb 的做者也很貼心爲咱們提供了三個在線示例：

Bootstrap checkout form（https://www.rrweb.io/demo/checkout-form）
Conversational Form（https://www.rrweb.io/demo/chat）
Tetris game（https://www.rrweb.io/demo/tetris?lan=en）

Tetris 即俄羅斯方塊，適用於全部電子遊戲機和電腦操做系統，是一個最初由阿列克謝帕吉特諾夫在蘇聯設計和編程的益智類視頻遊戲。

俄羅斯方塊（Tetris）這個遊戲，勾起了本人對童年的無限回憶，一波回憶殺，有木有？

hyper

A terminal built on web technologies.

https://github.com/vercel/hyper

Hyper 是使用 Web 技術開發的命令行工具，它和 VS Code 同樣，都是基於 Electron，提供實用的 Plugins 和 Themes。

開發者能夠根據本身的喜愛，在 Hyper 官網 —— hyper.is/themes 選擇本身喜歡的主題，固然也能夠與其餘用戶分享本身開發的主題：

amis

前端低代碼框架，經過 JSON 配置就能生成各類後臺頁面。

https://github.com/baidu/amis

amis 百度開源的前端低代碼框架，經過 JSON 配置就能生成各類後臺頁面，極大減小開發成本，甚至能夠不須要了解前端。目前在百度普遍用於內部平臺的前端開發，已有 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 hooks for forms validation without the hassle (Web + React Native)

https://github.com/react-hook-form/react-hook-form

React Hook Form 是高性能、靈活、易拓展、易於使用的表單校驗庫。它支持如下特性：

使建立表單和集成更加便捷
非受控表單校驗
以性能和開發體驗爲基礎構建
迷你的體積而沒有其餘依賴
遵循 html 標準進行校驗
與 React Native 兼容
支持 Yup, Joi, Superstruct 或自定義
支持瀏覽器原生校驗

nest

A progressive Node.js framework for building efficient, scalable, and enterprise-grade server-side applications on top of TypeScript & JavaScript (ES6, ES7, ES8) 🚀.

https://github.com/nestjs/nest

Nest 是構建高效，可擴展的 Node.js Web 應用程序的框架。它使用現代的 JavaScript 或 TypeScript（保留與純 JavaScript 的兼容性），並結合 OOP（面向對象編程），FP（函數式編程）和FRP（函數響應式編程）的元素。

在底層，Nest 使用了 Express，但也提供了與其餘各類庫的兼容，例如 Fastify，能夠方便地使用各類可用的第三方插件。

近幾年，因爲 Node.js，JavaScript 已經成爲 Web 前端和後端應用程序的「通用語言」，從而產生了像 Angular、React、Vue 等使人耳目一新的項目，這些項目提升了開發人員的生產力，使得能夠快速構建可測試的且可擴展的前端應用程序。然而，在服務器端，雖然有不少優秀的庫、helper 和 Node 工具，可是它們都沒有有效地解決主要問題 —— 架構。

Nest 旨在提供一個開箱即用的應用程序體系結構，容許輕鬆建立高度可測試，可擴展，鬆散耦合且易於維護的應用程序。