TypeScript 是一種由微軟開發的自由和開源的編程語言，它是 JavaScript 的一個超集，而且本質上向這個語言添加了可選的靜態型別和基于類的面向物件編程，

TypeScript 提供最新的和不斷發展的 JavaScript 特性，包括那些來自 2015 年的 ECMAScript 和未來的提案中的特性，比如異步功能和 Decorators，以幫助建立健壯的組件，

• TS 入門：1.2W字 | 了不起的 TypeScript 入門教程（830+個??）
• TS 進階：一文讀懂 TypeScript 泛型及應用（ 7.8K字）（445+個??）
  另外如果大家遇到前端問題 可以來我的扣扣裙 519293536  一起交流學習，有問題找我 都會盡力幫大家哦

下圖顯示了 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 在內的 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 旨在提供一個開箱即用的應用程式體系結構，允許輕松創建高度可測驗，可擴展，松散耦合且易于維護的應用程式，

看完以上分享的這 10 個專案，小伙伴有沒有對其中的某些專案感興趣呢？如果有感興趣的話，可以來我的扣扣裙 519293536  一起交流學習，有問題找我 都會盡力幫大家哦

本文的文字及圖片來源于網路加上自己的想法,僅供學習、交流使用,不具有任何商業用途,著作權歸原作者所有,如有問題請及時聯系我們以作處理

標籤：JavaScript

上一篇：JavaScript 中document.write() 詳細用法介紹

下一篇：JavaScript連載18-工廠模式創建物件、自定義建構式