Code Monkey home page Code Monkey logo

advanced-typescript-workshop's Introduction

Advanced TypeScript Workshop

Hello! My name's Matt Pocock. This is a workshop repo to teach you about Advanced TypeScript.

Topics Covered

  • Using typeof and as const to derive types from runtime
  • Generics
  • Assertion functions & type predicates
  • Template literal types
  • Conditional types & infer
  • Diagnosing type errors

The plan of the workshop is to get you more confident with complex type signatures, less likely to want to use any, and faster at diagnosing errors.

Workshop Plan

We'll be running from 9AM PT - 2PM PT. Here's the plan:

  • 09:00-9:15: Setup & Housekeeping
  • 09:15-10:30: First session
  • 10:30-10:45: Coffee Break
  • 10:45-12:00: Second session
  • 12:00-12:30: Lunch
  • 12:30-14:00: Third session

We'll be working through the material in this repository, mostly in small groups.

System Requirements

  • git v2.14.1 or greater
  • NodeJS v16.15.0 or greater
  • npm v8.5.0 or greater

All of these must be available in your PATH. To verify things are set up properly, you can run this:

git --version
node --version
npm --version

Setup

After you've made sure to have the correct things (and versions) installed, you should be able to just run a few commands to get set up:

git clone https://github.com/mattpocock/advanced-typescript-workshop.git
cd advanced-typescript-workshop
npm install

That's it! You'll now have all the dependencies you need to work through the workshop exercises.

Exercises

Exercises are in the ./exercises folder. They're designed to be worked through one after the other.

Each exercise follows a similar pattern:

  • Look at the file with the *.code.ts extension. This gives you the code we're going to be working through and trying to understand.
  • Read through the *.exercise.ts file. Read through the file, comment-by-comment, and follow the instructions by either editing the file inline, or editing the *.code.ts file.
  • Wherever you see reference to Solution #1, check the *.solutions.ts file when you want to see the solution. Make sure you check the solution before proceeding! There's often crucial information there.

Be careful to read through each part of the exercise carefully - if you skip over parts of them, it might get difficult to find your way back.

Also, consider splitting your IDE into two panels, both looking at the same file. You can read from one, and write in the other - meaning you don't have to scroll up and down too much.

Emoji

Exercises use emoji to express various different things:

  • ๐Ÿ’ก - A new idea appears!
  • ๐Ÿ›  - Write some code!
  • ๐Ÿง‘โ€๐Ÿ’ป - Your team lead has some thoughts...
  • ๐Ÿ•ต๏ธโ€โ™‚๏ธ - Time for an investigation...
  • โ›”๏ธ - Eek! A type error.
  • โœ… - Hooray! The type error was fixed.
  • ๐Ÿš - Hover over something.
  • ๐Ÿ”ฎ - Do a go-to-definition.

License

This material is available for private, non-commercial use under the GPL version 3.

advanced-typescript-workshop's People

Contributors

mattpocock avatar xnorly avatar

Stargazers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.