让你眼前一亮的 10 大 TS 项目
TypeScript 是一种由微软发布的一种开放源代码编程语言。它是 JavaScript 的增强版,并且在面向对象编程方面进行了扩展。
TypeScript 支持最新颖的功能特性以及涵盖自 2015 年版 ECMAScript 及后续版本提出的创新特性。这些包括但不限于异步功能与装饰器等特性,旨在促进组件开发的整体稳定性。
下图显示了 TypeScript 与 ES5、ES2015 和 ES2016 之间的关系:

大家已经初步了解了TypeScript的基本知识。让我们直接进入主题吧!在这一节中我们将具体阐述「这些年收集的十个 TypeScript项目」中的第一个项目——AVA。
AVA
🤖 A framework for automated visual analytics.
AVA

rough
Generate graphics featuring hand-drawn sketches with a minimalist aesthetic.
Generate graphics featuring hand-drawn sketches with a minimalist aesthetic.
Rough.js 是一个小巧的图形库(经过压缩后小于 9 kB),允许你用手工绘制草图。该库具备绘制线条、曲线、弧线、多边形、圆形和椭圆等基础功能,并且能够处理 SVG 路径。Rough.js 同时支持 Canvas 和 SVG 环境。

除了能够制作基本的图表外,Rough.js 还能创建出更为复杂的视觉效果图表,例如手工绘制风格的地图:

moveable
Moveable! Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable! Groupable! Snappable!
Moveable 能够将指定的对象转换为拖放式的,并具备大小调节、缩放功能以及旋转功能,并支持将对象组合在一起。
| Draggable | Resizable | Scalable | Rotatable |
|---|---|---|---|

|

|

|

|
|Warpable|Pinchable|Groupable|Snappable|
|

|

|

|

|
n8n
Node-based workflow automation tool developed under a fair-code open license. Efficiently automating tasks across various services.
n8n 是一个开源工作流自动化工具,它基于Node.js,提供免费且开放的许可.该工具支持独立托管,具有高度可扩展性,因此能够与内部工具无缝集成.它类似于IFTTT和Zapier,能够与其他超过100个在线服务建立互联互通,包括GitHub,Dropbox,Google,NextCloud,RSS,Slack,Telegram等.利用该平台你可以方便地达成当条件A触发服务B这样的自动化工作流程

IFTTT 被视为一个"网络自动化利器"这一创新性的互联网服务理念,其实用性毋庸置疑且概念极为简单.其全称为 If this then that , 即当满足"this"条件时会触发执行"that"动作.
rrweb-io
record and replay the web.
rrweb 被定义为 ‘记录并重放网页’ 的缩写,并旨在通过现代浏览器的强大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.
Hyper 是一个开发为 Web 技术的命令行工具;它与 VS Code 同样都是基于 Electron 框架,并配备丰富的插件库以及美观的主题选择。

开发者可以根据个人喜好访问 Hyper 官网 —— https://hyper.is/themes —— 并从中选择适合自己主题风格的主题;当然也可以与其他开发者分享自己设计的网站主题:

amis
前端低代码框架,通过 JSON 配置就能生成各种后台页面。
Amis 是百度开源的一个前端低代码框架。
基于 JSON 配置生成各种后台页面,并显著降低了开发成本。
无需深入了解前端技术即可使用。
目前,在百度内部广泛用于平台开发,
并已支持超过 100+ 个部门创建了 3w+ 页面。

amis 渲染器架构图

editor.js
模块化设计编辑器提供了一个简洁明了的JSON输出功能
模块化设计编辑器提供了一个简洁明了的JSON输出功能
这是一个专门用于开发人员协作的GitHub仓库
Editor.js采用了模块化设计。在条目构建中,默认情况下会将内容划分为独立的功能区如段落、标题、图像等基础模块。这些功能区被称为"块"。此外,在条目构建中可采用段落、标题、图像、视频及列表等多种形式作为核心模块。每个块都对应特定的功能实现方式即通过插件机制实现功能组件化的理念同时提供了丰富的一键式组件库并附带了一个简便的插件开发接口。

react-hook-form
📋 React hooks for forms validation without the hassle (Web + React Native)
属于高性能的表单校验库。它具备以下特性:
简化表单创建与集成过程
非受控表单校验功能
基于性能与用户体验设计
轻量且无需额外依赖
联合HTML标准实现校验功能
优化的体积设计
与React Native兼容
支持Yup、Joi、Superstruct等库的集成使用
同时支持直接使用自定义组件进行开发

nest
A powerful Node.js framework designed to develop high-performance, scalable applications using TypeScript and JavaScript (ES6, ES7, ES8), offering enterprise-grade solutions tailored for robust development.🚀
The Nest framework is specifically designed to build high-performance, highly scalable web applications based on Node.js or TypeScript, ensuring compatibility with pure JavaScript. It effectively integrates modern JavaScript or TypeScript, maintaining compatibility with pure JavaScript, alongside a combination of object-oriented programming, functional programming, and responsive programming approaches.
在底层架构中,Nest 基于Express构建了自身的框架,并且还提供了与多种第三方库集成的可能性。比如Fastify,该框架支持与之集成配合使用,并且使得用户能够轻松地接入各种可用的第三方插件。
近年来,在Node.js的推动下,JavaScript已成为构建Web前端及后端应用的通用编程语言,并催生了Angular、React及Vue等开创性项目。这些创新性项目显著提升了开发效率,并使开发者能够迅速构建出可测试且具扩展性的前端应用。然而,在服务器端领域中尽管有诸多优秀的库件及辅助工具支持Node技术的发展与应用但它们仍未能有效解决架构这一核心问题。
Nest 专为设计快速部署和管理应用程序而生,并支持预设配置的应用架构以促进高效开发流程。该平台能够帮助开发者轻松构建高度可测试、可扩展且具有松散耦合特性的应用程序。

观看了这 10 个项目后,请问伙伴们是否对这些项目中有特别感兴趣的呢?如果有人对其中某个项目感兴趣的话不妨花些时间来学习TypeScript吧。此外也欢迎小伙伴们随时在评论区留下您的推荐哦!
加入重学TS 交流群,阿里、腾讯和京东大佬都在的群里,备注 3

