TypeScript 是一种由微软开发的自由和开源的编程言语。它是 JavaScript 的一个超集，而且本质上向这个言语增加了可选的静态类型和依据类的面向对象编程。

TypeScript 供应最新的0 j 0 M和不断发展的 JavaScriq u I – T l g wpt 特性，包含那些来自 2015 年的 ECMAScript 和未来的提M ] . n 2案中的特性，比如异步功用和 Decorators，以帮助建立强健的组件。

  • TS 入门：1.2$ m u gW字 | 了不得的 TypeScript 入门教程（990+个）
  • TS 进阶：一文读懂 TypeScrip. c r % ~ 4 J v jt 泛型及使用（ 7.8K字）（495+个）

下图显示了 TypeScript 与 ES5、ES2015 和 ES2016 之间的联系：

让人眼前一亮的 10 大 TS 项目

好的，. o E @ 6 r [简略介绍了 TypeScript，下面咱们立刻步入正题，来开端介绍 ”这些年我收藏过的 10 个 TS 项目“ 中@ ~ f Z | @ p +的第一个项目 —— AVA。5 h Z Q #

AVA

A framework for automated visual analytics.

https://github.com/antvis/AVA

AVA（A Visual Analytics）是为了5 E Z W更简N W { I ? * x洁的可视分析而生的技术结构。 其称号中的第一个 A 具有多重涵义：它说明了这是一个出自阿里巴巴集团（Alibaba）技术结构，其方针是成为一个主动化（Automated）、智能驱动（AI driveR | [ $ t : R Kn）、支撑增强分析（Augmented）的可视分析处理` } ; w |方案。

让人眼前一亮的 10 大 TS 项目

rough

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

https://github.com/pshihn/rough

Rough.js 是一个轻量的图形库（紧9 e | M % K b V $缩后的 <9 kB），能# n 3 ] c @ i够让你用手绘的办法制造M / b r r ] Y草图。该库供应制造线条、曲线、弧线、多边形、圆形和椭圆的基础才能，一同支撑制造 SVG 途径。Rough.js 可一同支撑 Canvas 和 SVG。

让人眼前一亮的 10 大 TS 项目

除了生成简略的图形之外，运用 Rough.js 也可以用来生成杂乱的图形，比如手绘风格的地图：

让人眼前一亮的 10 大 TS 项目

moveable

Moveable! DrP l : c ] 3 . aggable! Resizabl: x _e! Scalable! Rotatable! Warpable! Pinchable! Groupable! Snap/ ! + t _ S Ipable!

https://github.com/daybrush/moveable

MoveablC w b B D ne 可以让你把指定的元素，变成可拖动的，可调整巨细的，可伸缩的，可旋转的或可组合的元素。

Draggable Resizable Scalable Rotatable
让人眼前一亮的 10 大 TS 项目 让人眼前一亮的 10 大 TS 项目 让人眼前一亮的 10 大 TS 项目 让人眼前一亮的 10 大 TS 项目
Warpable Pinchable Groupable Snappable
让人眼前一亮的 10 大 TS 项目 让人眼前一亮的 10 大 TS 项目 让人眼前一亮的 10 大 TS 项目 让人眼前一亮的 10 大 TS 项目

n8n

Free and open fair-code licC D u : & Ze% T 3 b 4 C Rnsed node based Workflow Automation Tool. EP Q / w Gac y i Q Asily automate tasks across different servicT L j d =es.

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

n8n 是一个免费、打开、fair-code 答应，依据节点的作业流主动化东西。| ) :它可以自保管，很简略扩展，因而也可以与内部东西一同运用。E A R Jn8n 类似 IFTTT、Zapier，可以: x / E z 5 ! 8 L互联互通包含 GitHub、Dropbox、Google、NextCLoud、RSS、Sl1 H k Z K N –ack 在内的 100 多个在线服务。运用 n8n 你/ p K e可以方便地完成当 A 条件发生，触发 B 服务这样的主动作业流程。

让人眼前一亮的 10 大 TS 项目

IFTTT 是一个被称为 “网络主动化神器” 的创新型互联网服务理念，它很有用并) D [ ^ ~ . 1 r g且概念很简略。IFTTT 全称是 If this then that，意思是假如满意 “this” 条件，则触发执行 “that” 动作。

rrweb-io

record and replaq ~ , l Ly the web.

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

rrweb 是 ‘record and replay the web’ 的简写，旨在运用现代浏览器所供应的强壮 API 录制并回放任意 Web 界? ? L ?面中的用户操作。

rrweb 首要由 3 部分组成：

  • rrweb-snapshot，包含 snapshot 和 rebuild 两个功用。snapshot 用于将 DOM 及其状况转化为可序列化的数据3 x [结构并增加仅有标识；re: k k W { bu% | k i 0 s + B }ild 则是将 snapshot 记载的数据结构重建为对应的 DOM。
  • rrweb，包含 record 和 replay 两个功用。record 用于记载K } D ( n I Dh $ & E g COM 中? N E ( 6 a K ; K的V e { & R P U r ;一切改动（mutation）；replay 则是将记载的改动依照对应的时间逐个l t 2 3 t r } #重放。
  • rrweb-player，为 rrweb 供应一套 UI 控件，供应依据 GUI 的暂停、快进、拖拽至B p N J任意时间点播放等功用。
让人眼前一亮的 10 大 TS 项目

如上图所示，在完结录制 Web 界面中的用户操作之后，就可以 rrweb-player 进行暂停、快进、拖拽至任意时间点等播放功用。看完之I N 7 m后，有些小伙伴是不是手痒了，rrweb 的作者也很贴心为咱们供应了三个在线示例：

  • Bootstrap checkout form（https://www.a B !rrwebp A % S ,.io/demo/checkout-form）
  • Conversational Form（https://www.rrweb.io/demo/chat）
  • Tetris game（https://www.rrweN C ] $ I z Z {b.io/demo/tetris?lan=en）
让人眼前一亮的 10 大 TS 项目

TB N ! X O # d h ,etris 即俄罗斯方块，适用于一切电子游戏机和电脑操作系统，是一个开端由阿列克谢帕吉特诺夫在苏联规划和编$ ; % d 0程的益智类视频游戏。

俄罗斯方块（Tetris）这个游戏，勾起了本人对童年的无限回想，一波回想杀，有木有？

hyper

A terminal built on web technoloF R ] – X T ~gies.

https://github.com/vercel/hyper

HypM 2 – Z c : ; Cer 是运用 Ws j N ~ e ; C M Deb 技术开发的命令行东西，它和 VS Code 相同，都是依据 Electron，供应有用的 Plugins 和 Themes。

让人眼前一亮的 10 大 TS 项目

开发者可以依据自己的喜好，在 Hyper 官网 —— hyper.4 U c h f is/themes 选择自己喜欢的主题，当然也可以与其他用户共享自己开发的主题：

让人眼前一亮的 10 大 TS 项目

amis

前端低代码结构，通过 JSON 装备就能生成各种后台页面。

https://github.com/baidu( & I/amis

amis 百度开源的前端低代码结构，通过 JSON 装备就能生成各种后台页面l 0 + C，极大削减开发本钱，甚至可以不需要了解前端。现在在百度广泛用于内部渠道的前端开发，已有 100+ 部分运用，创建了 3w+ 页面。

让人眼前一亮的 10 大 TS 项目

amis 渲染器架构图

让人眼前一亮的 10 大 TS 项目

editor.js

A block-styled editor wiD 6 t b u c mth clean JSON output.

https://github.com/codex-team/editor.js

Editor.js 是一个块风格的编辑器。块是组成条目的结构单元。例如，阶段，标题，图画，视频，列表都是块。每个块由插件标明。此外，Editor.js 还为开发者供应了许多现成的插件和一个用= K i i n |于创建新插件的简略 APo N ( ` c / 6 7 ;I。

让人眼前一亮的 10 大 TS 项目

react-hook-form

React hooks for forms validation without the hassle (Web + React Native)

https://github.com/react-hook-form/reactd 6 # W -hook-form

React Hook Form 是高功用、活络K c b q K、易拓展、易于运用的表单校验库。它支撑以下特性：

  • 使创建表单和集成愈加快捷
  • 非受控表单校验
  • 以功用和开发体会为基础构建
  • 迷你的体积而没有其他依靠
  • 遵从 html 标@ ~ K ( @ 0 $准进行校验
  • 与 React Native 兼容
  • 支撑 Yup, Joi, Superstruct 或自定义
  • 支撑浏览器原r O b e 3 @ S生校验
让人眼前一亮的 10 大 TS 项目

nest

A progressive Node.js framew^ L & J W Q vork for building efficient, scalable, and enterprise-grade server-side applications on top of TypeScript & JavaScript (ES6, ES7, ES8) .

https://github.@ 2 6 @ : +com/nestjs/nest

Nest 是构建高效，可扩展的 NY k 8 v , Z 6 I Yode.js Web 使用程序的结构。 它运用现代的 JavaScript 或 TypeScript（保存与纯 JavaScript 的兼容性），并结U 1 3 3 K K s合 OOP（面向对象编程），FP（函数式编程）和FRP（函数呼应式编程）的元素。

在底层，Nest 运用了 Express，但也供应了与其他各种库的兼容，例如 Fastify，可以方便地运用各种可用的第三方2 G B 7 o & V R插件。

近几年，由于 Node.js，J( A MavaScript 已经成为 Web 前端和后端使用程序的「通用言语」，然后发生了像 Angular、React、Vue 等令人耳目一新的项目，这些项目提高了开发s l D 8 y人员的生产力，使得可以快速构建可检验$ & A ! D # R f L的且可扩展的; o Z C 4 U j前端使用程序。 然而，在服务器端，虽然有许多优异的库、he, T % [ Olper 和 Node 东西，但是它们都没有有效地! a t v ) D n处理首要问题 —— 架构。

Nest 旨在供应一个开箱即用的使用程序体系结构，答应} p 0 w o轻松创建高度可检验，可扩展，松懈耦合且易于保护的使用程序。

让人眼前一亮的 10 大 TS 项目

看完以上共享的这 10 个项目，小伙伴有没有对其间的 P ? r某些项目感兴趣呢？假如有感兴趣的话，赶忙先把 T Y ^ ^ 5 pypeScript 学起来哟。其他，欢迎小伙伴们，给我留言引荐其他好( m y –玩、幽默的 TypeScript 项目。

创建了一个 “重学TypeScript” 的6 2 ? f n 9 G微信群，想加群的小伙伴，加我微信 “semlinker”，备注 2。阿里、京东、腾讯的大佬都在群里等你哟。
semlinker/awesoi : j ?me-typescript 1.6K

让人眼前一亮的 10 大 TS 项目

本文运用 mdnice 排版