Awesome TypeScript

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.

Find the best open-source alternatives to popular software.

Contents

• Awesome TypeScript
  • Contents
  • TypeScript Tutorials
    • Features
    • Chinese
      • Beginner
      • Advanced
      • Practical
    • English
      • Features
      • Tutorials
      • Samples
      • Guide
      • Awesome
  • TypeScript Starters/Boilerplates
  • TypeScript Design patterns
  • TypeScript Real World Design Patterns
  • TypeScript Videos
    • Chinese
    • English
  • TypeScript QA
  • TypeScript Books
    • Chinese
    • English
  • TypeScript Tools/Libraries/frameworks
    • Build
      • webpack
      • gulp
      • grunt
      • compiler
      • linter
    • Ioc
    • Doc
    • Data Structure
    • Database
    • Server
  • TypeScript IDE
    • Offline
      • IDE/Plugins
    • Online
      • Playground
      • Chrome Extension
  • Contributing
    • Guide

TypeScript Tutorials

Features

• 蚂蚁金服数据体验技术团队 - TypeScript 体系调研报告
• Vilicvane - TypeScript 2.0 新特性一览
• Vilicvane - TypeScript 2.1 新特性一览
• Vilicvane - TypeScript 2.2 新特性一览
• Vilicvane - TypeScript 2.3 新特性一览
• Microsoft - TypeScript 2.4 新特性一览
• Vilicvane - TypeScript 2.5~2.6 新特性一览
• 黄子毅 - 精读<<TypeScript2.0 - 2.9>>
• Linux 中国 - 一篇缺失的 TypeScript 介绍
• 单纯的土豆 - ES5, ES2015 和 TypeScript 的区别
• 三七二十 - TypeScript 的好处都有啥？和 JavaScript 的区别在哪？
• Grain 先森 - 前端-TypeScript VS JavaScript 深度对比
• 贺贺 v5 - Angular2、Ionic、TypeScript、es6 的关系？
• 极客学院 - 使用 TypeScript 提高开发能力
• Hevin - 为什么 Reddit 选择了 TypeScript？
• JiaXinYi - Angular: 我们为什么选择 TypeScript
• Djcordhose - 对比 Flow 和 TypeScript
• Neal1991 - 采用 Flow 以及 TypeScript
• 柳佳 - Flow vs Typescript
• SDK.cn - Slack 的 TypeScript 之路
• RDDcoding - 熟悉全栈 TypeScript
• Lxxyx - TypeScript - 不止稳，而且快
• Zhangwang - TypeScript - 一种思维方式
• Lienviws - TypeScript 安利指南

Chinese

Beginner

• Xcatliu - TypeScript 入门教程
• Taobaofed - 认识 TypeScript
• Shangpudxd - TypeScript 入门
• Muyunyun - 从 JavaScript 到 TypeScript
• Gukson - Typescript 基础入门
• oWSQo - TypeScript 入门
• Semlinker - TypeScript 简介及编码规范
• 技术胖 - TypeScript 图文视频教程

Advanced

• Zhongsp - TypeScript Handbook (中文版)
• Bjcl - TypeScript 教程
• Jason - 你所不知道的 Typescript 与 Redux 类型优化
• 王亦斯 - 巧用 Typescript
• 三毛 - 巧用 TypeScript （一）
• 三毛 - 巧用 TypeScript （二）
• 三毛 - 巧用 TypeScript （三）
• 三毛 - 巧用 TypeScript （四）
• 三毛 - 巧用 TypeScript （五）
• Square - TypeScript 3.0 元组类型的用法和一些奇技淫巧
• Square - Typescript 类型高级技巧，和强约束 bind 的实现
• 腾讯 NEXT 学位 - 深入 TypeScript 的类型系统
• newraina - 手把手教写 TypeScript Transformer Plugin
• EER - TypeScript 重构 Axios 经验分享
• 三毛 - 深入理解 TypeScript
• Poetry - Typescript 实践总结[基础+工程+实践]
• Shanyue - TypeScript 高级技巧

Practical

Angular

• Yanxiaodi - Ionic 2 With TypeScript
• Cacivy - Angular 2 + TypeScript 实现的 Cnode 社区

Vue

• 薯条真的好好吃哦 - almost 最好的 Vue + Typescript 系列 01 环境搭建篇
• toBeTheLight - Vue 2.5 中将迎来有关 TypeScript 的改进！
• 盘风 - Vue2.5+ Typescript 引入全面指南
• 腾讯 Bugly - vuejs+ts+webpack2 框架的项目实践
• LinkFly - 从 JavaScript 到 TypeScript 6 - Vue 引入 TypeScript
• SimonZhanglTer - 可能是最全的 Vue-TypeScript 教程(附实例代码和一键构建工具)
• 三命 - vue + typescript 进阶篇
• qiangdada - TypeScript + 大型项目实战
• 距离 - Vue 全家桶+TypeScript 使用总结
• 海蓝 2018 - vue 全家桶+Typescript 开发一款习惯养成 APP
• Treri - 使用 FIS3 和 TypeScript 实现 vue-hackernews-2.0
• 🍼holyZhengs - 记录一次基于 vue、typescript、pwa 的项目由开发到部署
• 大转转 FE - 原有 vue 项目接入 typescript
• MartinYin - 使用 typescript+vue 编写电影信息小项目！
• 三毛 - 在 Vue 中使用 TypeScript 的一些思考（实践）

React

• fi3ework - 基于 React + TypeScript 的网易云音乐
• iKcamp - 翻译 | 开始使用 TypeScript 和 React
• 贾顺名 - TypeScript 在 react 项目中的实践
• 花生毛豆 - TypeScript 在 React 中使用总结
• icepy - 复杂 React 应用中的 TypeScript 3.0 实践
• 蚂蚁金服数据体验技术团队 - TypeScript 实践
• 蚂蚁金服数据体验技术团队 - TypeScript 2.8 下的终极 React 组件模式
• YDJFE - 一次 TypeScript, React, Node, MongoDB 的模板式前后端分离开发实践

React Native

• 胡桓铭 - React Native 与 TypeScript 在企业开发中的实践

Wechat

• Guyoung - 使用 TypeScript 开发微信小程序

Node.js

• MarxJiao - 使用 webpack 搭建基于 typescript 的 node 开发环境
• 天猪 - 当 Egg 遇到 TypeScript，收获茶叶蛋一枚
• 奇舞团 - ThinkJS 3.0 如何实现对 TypeScript 的支持
• 贾顺名 - TypeScript 在 node 项目中的实践
• 贾顺名 - 使用 TS + Sequelize 实现更简洁的 CRUD

English

Features

• Marius Schulz - TypeScript 2.0: The never Type
• Marius Schulz - TypeScript 2.0: Tagged Union Types
• Marius Schulz - TypeScript 2.0: Read-Only Properties
• Marius Schulz - TypeScript 2.1: Object Rest and Spread
• Marius Schulz - TypeScript 2.1: Mapped Types
• Marius Schulz - TypeScript 2.1: Improved Inference for Literal Types
• Marius Schulz - TypeScript 2.1: keyof and Lookup Types
• Marius Schulz - TypeScript 2.2: Dotted Properties and String Index Signatures
• Marius Schulz - TypeScript 2.3: Generic Parameter Defaults
• Marius Schulz - TypeScript 2.4: String Enums
• Marius Schulz - TypeScript 2.5: Optional catch Binding
• Marius Schulz - TypeScript 2.6: JSX Fragment Syntax
• Marius Schulz - TypeScript 2.7: Strict Property Initialization
• Marius Schulz - TypeScript 2.7: Numeric Separators
• Marius Schulz - TypeScript 2.8: Per-File JSX Factories

Tutorials

• Microsoft - TypeScript-Handbook
• Microsoft - TypeScript Team Blog
• TypeStrong - Learn TypeScript
• Indrek Lasn - TypeScript — JavaScript with superpowers
• Indrek Lasn - TypeScript — JavaScript with superpowers II
• Martin Hochel - Interface vs Type alias in TypeScript 2.7
• Valentin PARSY - Typescript : class vs interface
• Victor Savkin - Functional TypeScript
• Netanel Basal - Using TypeScript Dynamic Imports in Angular
• Elena Sufieva - Advanced TypeScript Types with Examples
• Wolksoftware - Decorators Reflection JavaScript TypeScript
• Luis Aviles - Real Time Apps with TypeScript: Integrating Web Sockets, Node & Angular
• Jonny Fox - WebSocket + Node.js + Express — Step by step tutorial using Typescript
• Trey Huffine - TypeScript and React using create-react-app: A step-by-step guide to setting up your first app
• Rinto Jose - React Native with TypeScript

Samples

• Microsoft - TypeScriptSamples
• DanWahlin - Angular-JumpStart
• chsakell - aspnet5-angular2-typescript
• Lemoncode - react-typescript-samples
• jaysoo - todomvc-redux-react-typescript
• rangle - typescript-react-redux-example
• luixaviles - socket-io-typescript-chat
• dwyl - hapi-typescript-example

Guide

• piotrwitek - react-redux-typescript-guide
• labs42io - clean-code-typescript
• sw-yx - react-typescript-cheatsheet

Awesome

• dzharii - awesome-typescript
• brookshi - awesome-typescript-projects

TypeScript Starters/Boilerplates

• Marve10s - better-fullstack - End-to-end fullstack scaffolding across TypeScript, Rust, Python & Go — code ready for you or your AI agent.
• Kriasoft - React Starter Kit
• Microsoft - TypeScript-React-Starter
• Microsoft - TypeScript-Vue-Starter
• Microsoft - TypeScript-Knockout-Starter
• Microsoft - TypeScript-React-Native-Starter
• Microsoft - TypeScript-WeChat-Starter
• Microsoft - TypeScript-Babel-Starter
• Microsoft - TypeScript-Node-Starter
• wmonk - create-react-app-typescript
• rokoroku - react-redux-typescript-boilerplate
• bitjson - typescript-starter
• blove - typescript-express-starter
• w3tecch - express-typescript-boilerplate
• kamahl19 - react-starter
• jsynowiec - node-typescript-boilerplate

TypeScript Design patterns

• 蚂蚁金服数据体验技术团队 - Typescript 玩转设计模式 之 创建型模式
• 蚂蚁金服数据体验技术团队 - Typescript 玩转设计模式 之 结构型模式（上）
• 蚂蚁金服数据体验技术团队 - Typescript 玩转设计模式 之 结构型模式（下）
• 蚂蚁金服数据体验技术团队 - Typescript 玩转设计模式 之 对象行为型模式（上）
• 蚂蚁金服数据体验技术团队 -Typescript 玩转设计模式 之 对象行为型模式（下）
• 杜帅 - 浅析 Typescript 设计模式
• torokmark - design_patterns_in_typescript

TypeScript Videos

Chinese

• 慕课网 - TypeScript 入门
• 智能社 - TypeScript - 2 小时带你体验微软新坑
• cnode - 2018 年最新 Typescript 视频教程

English

• egghead.io - Use Types Effectively in TypeScript
• egghead.io - Up and Running with TypeScript
• egghead.io - advanced-static-types-in-typescript
• Microsoft - Angular Applications with TypeScript
• udemy - TypeScript Fundamentals
• udemy - Introduction to TypeScript
• udemy - TypeScript: Learn the Basics in a Refreshing Way
• youtube - Evolving JavaScript with TypeScript
• youtube - Functional Programming with TypeScript
• scrimba - Introduction to TypeScript

TypeScript QA

• Segmentfault - 为什么 Angular2 和 Ionic2 都用 TypeScript 开发，TypeScript 有什么优势吗？
• Zhihu - TypeScript 和 JavaScript 的区别？
• Zhihu - 如何评价 TypeScript？
• Zhihu - 现在 TypeScript 的生态如何？
• Zhihu - 关于 Typescript 和 ES6 的对比？
• Zhihu - 为什么 TypeScript 成功了，更先进的 ActionScript 却失败了？
• Zhihu - Typescript 有什么冷门但是很好用的特性？
• Zhihu - TypeScript 中的装饰器(Decorators)的本质是什么
• Zhihu - 如何学习用 Typescript 写 Reactjs?

TypeScript Books

Chinese

• Learning TypeScript (中文版)
• TypeScript 实战指南
• TypeScript 图形渲染实战：2D 架构设计与实现
• 迈向 Angular 2: 基于 TypeScript 的高性能 SPA 框架

English

• TypeScript Essentials
• Mastering TypeScript
• Mastering TypeScript - Second Edition
• Mastering TypeScript 3: Build enterprise-ready, industrial-strength web applications using TypeScript 3 and modern frameworks, 3rd Edition
• TypeScript 3.0 Quick Start Guide: The easiest way to learn TypeScript
• Learn React with TypeScript 3: Beginner's guide to modern React web development with TypeScript 3
• Advanced TypeScript Programming Projects: Build 9 different apps with TypeScript 3 and JavaScript frameworks such as Angular, React, and Vue
• Hands-On RESTful Web Services with TypeScript 3: Design and develop scalable RESTful APIs for your applications
• Hands-On TypeScript for C# and .NET Core Developers: Transition from C# to TypeScript 3.1 and build applications with ASP.NET Core 2
• Hands-On Functional Programming with TypeScript: Explore functional and reactive programming to create robust and testable TypeScript applications
• Learning TypeScript
• Learning TypeScript 2.x
• TypeScript 2.x By Example
• TypeScript 2.x for Angular Developers
• Angular 2 Development with TypeScript
• TypeScript: Modern JavaScript Development
• TypeScript Blueprints
• Pro TypeScript
• TypeScript Design Patterns
• TypeScript High Performance
• TypeScript Microservices

TypeScript Tools/Libraries

Build

Web API

• ts-audio

webpack

• s-panferov - awesome-typescript-loader
• TypeStrong - ts-loader

gulp

• ivogabe - gulp-typescript

grunt

• TypeStrong - grunt-ts

compiler

• TypeStrong - ts-node
• AssemblyScript - assemblyscript
• bcherny - json-schema-to-typescript
• YousefED - typescript-json-schema
• tsconfig.json Generator - Free browser tool that generates a ready-to-commit tsconfig.json from presets (React+Vite, Next.js, Node, Library) or custom options, including strict-mode flags, JSX, moduleResolution, path aliases, and composite/project references.

linter

• palantir - tslint
• ESLint
• Open Code Review - AI code quality gate detecting hallucinated packages, phantom dependencies, stale APIs, and AI-specific code defects. MCP Server + CLI + CI/CD.

Ioc

• InferDI - Type-safe, decorator-free dependency injection container for modern TypeScript with framework adapters.
• Inversify - InversifyJS
• Inversify - inversify-express-example
• Injex Framework
• Injex Express Plugin

Doc

• TypeStrong - typedoc

Data Structure

• dcodeIO - protobuf.js
• basarat - typescript-collections
• samchon - tstl
• smoren - itertools-ts

Database

• Typeorm - typeorm
  • samchon - safe-typeorm
• RobinBuschmann - sequelize-typescript
• MikroORM

Server

• Alibaba - egg.js
• welefen - thinkjs
• kamilmysliwiec - nest
  • samchon - nestia
• samchon - tgrid
• samchon - mutex-server

Utility

• PigmentTS
• csv-pipe
• Markstream - Streaming Markdown renderer for AI chat interfaces, with Vue, React, Svelte, Angular, and Vue 2 packages plus Mermaid, KaTeX, syntax highlighting, safe HTML, and SSR support.
• JSON to TypeScript - Free online tool that converts JSON objects into TypeScript interfaces and types, no signup required.
• Chronera - Universal, type-safe date, time, calendar, era, locale, and timezone toolkit with RFC 9557, Temporal ZonedDateTime, and multi-cultural calendar engines.

CLI

• capcut-cli

• reflow - SSR-safe responsive toolkit for TypeScript. Breakpoints, container queries, fluid typography, and user preference hooks. Works across React, Vue, Svelte, Solid, Qwik, Preact, Angular, and Lit.

• Tura - Build agent that uses 80% less token and delivers better results.

TypeScript IDE

Offline

IDE/Plugins

• Visual Studio Community
• Visual Studio Code
• WebStorm
• PhpStorm
• TypeScript Sublime Plugin
• Atom TypeScript
• TypeScript Interactive Development Environment for Emacs
• TypeScript IDE for Eclipse
• TypeScript Syntax for VIM

Online

Playground

• TypeScript official Playground
• Stackblitz
• JS Bin
• Codepen
• TypeScript Editor
• TypeScript Interpret - Terminal Emulator
• TypeScript Play

Chrome Extension

• OctoLinker

Contributing

We welcome your contributions 🌺

Guide

1. Please make sure to add your item in the correct section.
2. Always add new items at the end of the list. The format should be consistent with the current section's items.
3. If you feel that some items are in the wrong section or you need to add a new section, please feel free to edit.

⬆ Go To Top