让人眼前一亮的 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 旨在提供一个开箱即用的应用程序体系结构，容许轻松建立高度可测试，可扩展，松散耦合且易于维护的应用程序。

看完以上分享的这 10 个项目，小伙伴有没有对其中的某些项目感兴趣呢？若是有感兴趣的话，赶忙先把 TypeScript 学起来哟。另外，欢迎小伙伴们，给我留言推荐其余好玩、有趣的 TypeScript 项目。

建立了一个 “重学TypeScript” 的微信群，想加群的小伙伴，加我微信 "semlinker"，备注重学TS。目前已有 TS 系列文章 41 篇。

本文使用 mdnice 排版