TypeScript is a free and open source programming language developed by Microsoft. It is a superset of JavaScript, and essentially adds optional static typing and class-based object-oriented programming to the language.

TypeScript offers the latest and evolving JavaScript features, including those from ECMAScript 2015 and future proposals, such as asynchronous functionality and Decorators, to help build robust components.

  • TS introduction: 1.2 W word | great TypeScript introductory tutorial (1190 + 👍)
  • Understanding TypeScript generics and applications (7.8K words) (535+ 👍)

The following diagram shows TypeScript in relation to ES5, ES2015, and ES2016:


Ok, with a brief introduction to TypeScript, let’s get down to business and introduce AVA, the first project in the “10 TS projects I’ve collected over the years.”

AVA

🤖 A framework for automated visual analytics.

https://github.com/antvis/AVA

AVA (A Visual Analytics) is A technical framework for easier Visual analysis. The first A in its name has multiple meanings: it indicates that this is an Automated, ai-driven, Augmented visual analytics solution from Alibaba’s technology framework.


rough

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

https://github.com/pshihn/rough

Rough. Js is a lightweight graphics library (<9 kB compressed) that allows you to sketch by hand. The library provides basic capabilities for drawing lines, curves, arcs, polygons, circles, and ellipses, as well as support for drawing SVG paths. Rough. Js supports both Canvas and SVG.


In addition to generating simple graphics, Rough. Js can also be used to generate complex graphics, such as hand-drawn style maps:


moveable

Moveable! Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable! Groupable! Snappable!

https://github.com/daybrush/moveable

Moveable allows you to change a specified element into a draggable, resizable, scalable, rotatable, or combinable element.

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 is a free, open, fair-code-licensed, node-based workflow automation tool. It is self-hosted and easily extensible, so it can also be used with internal tools. Like IFTTT and Zapier, n8N connects to more than 100 online services, including GitHub, Dropbox, Google, NextCLoud, RSS and Slack. With N8N you can easily implement automatic workflows such as triggering service B when condition A occurs.


IFTTT is an innovative Internet service concept called “network automation artifact” that is practical and simple in concept. IFTTT stands for If this then that, meaning that If the “this” condition is met, the “that” action is triggered.

rrweb-io

record and replay the web.

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

Rrweb, short for ‘Record and Replay the Web’, aims to record and replay user actions in any Web interface using powerful apis provided by modern browsers.

Rrweb consists of three main parts:

  • Rrweb-snapshot, including snapshot and rebuild functions. Snapshot is used to convert the DOM and its state into serializable data structures and add unique identifiers. Rebuild is to rebuild the data structure recorded by snapshot into the corresponding DOM.
  • Rrweb, including record and replay two functions. Record is used to record all mutations in the DOM; Replay is to replay recorded changes one by one at the corresponding time.
  • Rrweb – Player, a set of UI controls for RRWeb that provide GUI-based pause, fast forward, drag and drop to play at any point in time, and more.

As shown in the figure above, after recording user actions in the Web interface, rrWeb-Player can pause, fast-forward, drag and drop to any point in time, and so on. Rrweb’s authors were kind enough to provide us with three online examples:

  • The 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, a puzzle video game originally designed and programmed by Alexei Padjitnov in the Soviet Union, is available on all videogame and computer operating systems.

Tetris this game, brought up my infinite memories of childhood, a wave of memory kill, have you?

hyper

A terminal built on web technologies.

https://github.com/vercel/hyper

Hyper is a command line tool developed using Web technology. Like VS Code, it is based on Electron and provides useful Plugins and Themes.


You can choose your favorite themes from Hyper’s official website — Hyper-. Is /themes, and share your themes with other users:


amis

Front-end low code framework, through JSON configuration can generate a variety of background pages.

https://github.com/baidu/amis

Amis Open source front-end low code framework, through JSON configuration can generate a variety of background pages, greatly reduce the development cost, even do not need to understand the front-end. At present, it is widely used in the front-end development of internal platform in Baidu, and has been used by 100+ departments and created 3W + pages.


Amis renderer architecture diagram


editor.js

A block-styled editor with clean JSON output.

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

Editor.js is a block-style Editor. A block is a structural unit that makes up an entry. For example, paragraphs, headings, images, videos, lists are blocks. Each block is represented by the plug-in. In addition, editor.js provides developers with a number of off-the-shelf plug-ins and a simple API for creating new ones.


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 is a high-performance, flexible, easy-to-expand, and easy-to-use Form validation library. It supports the following features:

  • Make form creation and integration easier
  • Uncontrolled form validation
  • Build on performance and development experience
  • Mini size without other dependencies
  • Verify according to HTML standard
  • It is compatible with React Native
  • Support Yup, Joi, Superstruct or custom
  • Browser native verification is supported

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 is a framework for building efficient, scalable Node.js Web applications. It uses modern JavaScript or TypeScript (preserving compatibility with pure JavaScript) and combines elements of OOP (object-oriented programming), FP (functional programming), and FRP (functional responsive programming).

At the bottom, Nest uses Express, but also provides compatibility with various other libraries, such as Fastify, which makes it easy to use the various third-party plug-ins available.

In recent years, thanks to Node.js, JavaScript has become the “common language” for both front-end and back-end Web applications, leading to refreshing projects like Angular, React, and Vue that increase developer productivity. Makes it possible to quickly build testable and extensible front-end applications. On the server side, however, there are many excellent libraries, helpers, and Node tools, but none of them effectively address the main problem — architecture.

Nest is designed to provide an out-of-the-box application architecture that allows you to easily create highly testable, scalable, loosely coupled, and easy to maintain applications.


After reading the above 10 projects, do you find any of them interesting? If you’re interested, start learning TypeScript. Also, feel free to drop me a comment on other fun TypeScript projects.

This article is formatted using MDNICE