TypeScript 是一種由微軟開發的自由和開源的編程語言。它是 JavaScript 的一個超集，而且本質上向這個語言添加了可選的靜態類型和基於類的面向對象編程。
TypeScript 提供最新的和不斷髮展的 JavaScript 特性，包括那些來自 2015 年的 ECMAScript 和未來的提案中的特性，比如異步功能和 Decorators，以幫助建立健壯的組件。
下圖顯示了 TypeScript 與 ES5、ES2015 和 ES2016 之間的關係：
好的，簡單介紹了 TypeScript，下面我們馬上步入正題，來開始介紹 ”這些年我收藏過的 10 個 TS 項目“ 中的第一個項目 —— AVA。
AVA
???? A framework for automated visual analytics.
https://github.com/antvis/AVA
AVA（A Visual Analytics）是爲了更簡便的可視分析而生的技術框架。其名稱中的第一個 A 具有多重涵義：它說明了這是一個出自阿里巴巴集團（Alibaba）技術框架，其目標是成爲一個自動化（Automated）、智能驅動（AI driven）、支持增強分析（Augmented）的可視分析解決方案。
rough
Create graphics with a hand-drawn, sketchy, appearance.
https://github.com/pshihn/rough
Rough.js 是一個輕量的圖形庫（壓縮後的 <9 kB），可以讓你用手繪的方式繪製草圖。該庫提供繪製線條、曲線、弧線、多邊形、圓形和橢圓的基礎能力，同時支持繪製 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 許可，基於節點的工作流自動化工具。它可以自託管，很容易擴展，因此也可以與內部工具一起使用。n8n 類似 IFTTT、Zapier，可以互聯互通包括 GitHub、Dropbox、Google、NextCLoud、RSS、Slack、Telegram 在內的 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 官網 —— https://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 旨在提供一個開箱即用的應用程序體系結構，允許輕鬆創建高度可測試，可擴展，鬆散耦合且易於維護的應用程序。
看完以上分享的這 10 個項目，小夥伴有沒有對其中的某些項目感興趣呢？如果有感興趣的話，趕緊把 TypeScript 學起來喲。另外，歡迎小夥伴們，給我留言推薦其他好玩、有趣的 TypeScript 項目。
❝瞭解更多 TypeScript 資源(1.5K)：
https://github.com/semlinker/awesome-typescript
❞
▼
往期精彩回顧
▼
一文讀懂 TypeScript 泛型及應用
聚焦全棧，專注分享 Angular、TypeScript、Node.js 技術棧等全棧乾貨。
回覆 0 進入重學TypeScript學習羣
回覆 1 獲取全棧修仙之路博客地址