• Stars
    star
    228
  • Rank 175,267 (Top 4 %)
  • Language
    TypeScript
  • Created over 2 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Interactive exercises to get familiar with TypeScript's most advanced features

Type-Level TypeScript Workshop logo

by @flegall and @gvergnaud

Welcome to the ✨ Type-Level TypeScript Workshop ✨

Type-Level TypeScript is a course to take your TypeScript skills from intermediate to advanced. It will give you a solid understanding of the type system's fundamentals and guide you through its most advanced features. You will find everything you need to become a real TypeScript Pro β€” not only in-depth content, but also fun challenges to practice your new skills.

This repository contains many of these challenges. their difficulty gradually increases from beginner to super advanced! Give them a try!

πŸ‘‰ Take the workshop on Codesandbox

Introduction

Over the years, the type system of TypeScript has grown from basic type annotations to a large and complex programming language. If you have ever looked into the code of an open source library you may have found types that looked intimidating and foreign, like some esoteric language coming from another planet.

Library code often needs to be much more abstract than the code we are used to writing; that's why it makes extensive usage of advanced TypeScript features such as Generics, Conditional Types, Mapped Types or even Recursive Types. I personally learned these concepts while working on TS-Pattern, an open-source library that has the particularity of being extremely hard to type. In this course, I hope to share what I've learned by reading too much source code and tinkering for hundreds of hours with the type system.

πŸ‘‰ Keep learning on type-level-typescript.com

Note on naming conventions

While it's very common to use upper-case single letters for generics because it works well for simple types: Array<T>, it doesn't read very well when types become more complex.

In this workshop we will be using these naming conventions instead:

  • Generics should use TitleCase: type List<a> = ...
  • Type parameters should use camelCase: type List<first, restOfTheList> = ...
  • Inferred types (local variables), should use camelCase as well: type GetName<input> = input extends { name: infer name } ? ...

More Repositories

1

ts-pattern

🎨 The exhaustive Pattern Matching library for TypeScript, with smart type inference.
TypeScript
10,932
star
2

hotscript

A library of composable functions for the type-level! Transform your TypeScript types in any way you want using functions you already know.
TypeScript
3,337
star
3

nextjs-dynamic-routes

[Deprecated] Super simple way to create dynamic routes with Next.js
JavaScript
140
star
4

evolui

A tiny reactive user interface library, built on top of RxJs.
JavaScript
51
star
5

rx-ease

Spring animation operator for rxjs 🦚✨
TypeScript
21
star
6

use-middleware-reducer

React.useReducer which you can use with the huge middleware ecosystem of Redux.
TypeScript
8
star
7

hetic_formation_react

React introduction for HETIC teammate ;)
JavaScript
3
star
8

immutable-deep-update

Immutably update deeply nested data structures with ease.
JavaScript
3
star
9

vdom-tag

A template literals tag function to build a virtual dom tree
JavaScript
2
star
10

fullscreen.js

native javascript or jquery plugin to set responsive fullscreen size to videos or images
JavaScript
2
star
11

npm-package-starter

A boilerplate to help you get started creating a npm package.
JavaScript
2
star
12

notion-v2

JavaScript
2
star
13

WTFRU

HTML
1
star
14

intro-to-functional-programming

functional programming course (in french)
TypeScript
1
star
15

raytracer-haskell

Haskell
1
star
16

eclosion

Projet Ecriture.
JavaScript
1
star
17

raytracing

C++
1
star
18

rove2

TypeScript
1
star
19

react-state-reducer

intro to the state reducer pattern in react
1
star
20

social-clipboard

JavaScript
1
star
21

react-stack-boilerplate

personnal react stack based on react-transform-boilerplate
JavaScript
1
star
22

react-side-effects

Intro course about using side effects in a react application
1
star
23

block-vdom-test

TypeScript
1
star
24

raytracer-rust

raytracer in one weekend implemented in Rust
Rust
1
star
25

sketchfab-random-avatar

generative design experiment
JavaScript
1
star
26

hetic_formation_es6_laBase

JavaScript
1
star